Add icon to indicate detailed view in feature pod

According to UnifiedSystemTray UX spec, when a feature pod button has
the corresponding detailed view, it should show arrow icon on the left
of the label to indicate the existence of the detailed view.

As described in the UX spec, it needs custom layout logic.

UX spec: http://shortn/_UobIhDkQUx
Screenshot: http://screen/EogahaoN3m3

TEST=manual
BUG=none

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

ash/system/bluetooth/bluetooth_feature_pod_controller.cc

@@ -30,6 +30,7 @@ FeaturePodButton* BluetoothFeaturePodController::CreateButton() {
   DCHECK(!button_);
   button_ = new FeaturePodButton(this);
   button_->SetVectorIcon(kSystemMenuBluetoothIcon);
+  button_->ShowDetailedViewArrow();
   UpdateButton();
   return button_;
 }

ash/system/cast/cast_feature_pod_controller.cc

@@ -28,6 +28,7 @@ FeaturePodButton* CastFeaturePodController::CreateButton() {
   button_ = new FeaturePodButton(this);
   button_->SetVectorIcon(kSystemMenuCastIcon);
   button_->SetLabel(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_CAST_SHORT));
+  button_->ShowDetailedViewArrow();
   button_->set_id(VIEW_ID_CAST_MAIN_VIEW);
   Update();
   return button_;

ash/system/ime/ime_feature_pod_controller.cc

@@ -49,6 +49,7 @@ FeaturePodButton* IMEFeaturePodController::CreateButton() {
   button_ = new FeaturePodButton(this);
   button_->SetVectorIcon(kSystemMenuKeyboardIcon);
   button_->SetLabel(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_IME_SHORT));
+  button_->ShowDetailedViewArrow();
   Update();
   return button_;
 }

ash/system/network/network_feature_pod_button.cc

@@ -72,6 +72,7 @@ NetworkFeaturePodButton::NetworkFeaturePodButton(
   if (!NetworkHandler::IsInitialized())
     return;
   network_state_observer_ = std::make_unique<TrayNetworkStateObserver>(this);
+  ShowDetailedViewArrow();
   Update();
 }
 

ash/system/network/vpn_feature_pod_controller.cc

@@ -37,6 +37,7 @@ FeaturePodButton* VPNFeaturePodController::CreateButton() {
   button_ = new FeaturePodButton(this);
   button_->SetVectorIcon(kNetworkVpnIcon);
   button_->SetLabel(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_VPN_SHORT));
+  button_->ShowDetailedViewArrow();
   Update();
   return button_;
 }

ash/system/tray/tray_constants.h

@@ -178,6 +178,7 @@ constexpr int kUnifiedFeaturePodHorizontalSidePadding = 26;
 constexpr int kUnifiedFeaturePodHorizontalMiddlePadding = 28;
 constexpr int kUnifiedFeaturePodCollapsedVerticalPadding = 16;
 constexpr int kUnifiedFeaturePodCollapsedHorizontalPadding = 24;
+constexpr int kUnifiedFeaturePodArrowSpacing = 4;
 constexpr int kUnifiedFeaturePodItemsInRow = 3;
 constexpr int kUnifiedFeaturePodMaxItemsInCollapsed = 5;
 constexpr int kUnifiedNotificationSeparatorThickness = 1;

ash/system/unified/accessibility_feature_pod_controller.cc

@@ -27,6 +27,7 @@ FeaturePodButton* AccessibilityFeaturePodController::CreateButton() {
   button->SetLabel(
       l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_ACCESSIBILITY));
   button->SetVectorIcon(kSystemMenuAccessibilityIcon);
+  button->ShowDetailedViewArrow();
 
   AccessibilityDelegate* delegate = Shell::Get()->accessibility_delegate();
   LoginStatus login_status = Shell::Get()->session_controller()->login_status();

ash/system/unified/feature_pod_button.cc

@@ -4,6 +4,7 @@
 
 #include "ash/system/unified/feature_pod_button.h"
 
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_popup_utils.h"
@@ -17,6 +18,7 @@
 #include "ui/views/animation/ink_drop_impl.h"
 #include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/border.h"
+#include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 
@@ -24,9 +26,11 @@ namespace ash {
 
 namespace {
 
+// TODO(tetsui): Remove when the asset arrives.
+constexpr int kDetailedViewArrowSize = 10;
+
 void ConfigureFeaturePodLabel(views::Label* label) {
   label->SetAutoColorReadabilityEnabled(false);
-  label->SetHorizontalAlignment(gfx::ALIGN_CENTER);
   label->SetSubpixelRenderingEnabled(false);
 }
 
@@ -94,16 +98,25 @@ void FeaturePodIconButton::GetAccessibleNodeData(ui::AXNodeData* node_data) {
 }
 
 FeaturePodLabelButton::FeaturePodLabelButton(views::ButtonListener* listener)
-    : Button(listener), label_(new views::Label), sub_label_(new views::Label) {
-  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::kVertical, kUnifiedFeaturePodHoverPadding));
-  layout->set_minimum_cross_axis_size(kUnifiedFeaturePodSize.width());
+    : Button(listener),
+      label_(new views::Label),
+      sub_label_(new views::Label),
+      detailed_view_arrow_(new views::ImageView) {
+  SetBorder(views::CreateEmptyBorder(kUnifiedFeaturePodHoverPadding));
 
   ConfigureFeaturePodLabel(label_);
   ConfigureFeaturePodLabel(sub_label_);
   label_->SetEnabledColor(kUnifiedMenuTextColor);
   sub_label_->SetEnabledColor(kUnifiedMenuSecondaryTextColor);
+
+  detailed_view_arrow_->set_can_process_events_within_subtree(false);
+  detailed_view_arrow_->SetImage(
+      gfx::CreateVectorIcon(kNotificationCenterCollapseIcon,
+                            kDetailedViewArrowSize, kUnifiedMenuIconColor));
+  detailed_view_arrow_->SetVisible(false);
+
   AddChildView(label_);
+  AddChildView(detailed_view_arrow_);
   AddChildView(sub_label_);
 
   TrayPopupUtils::ConfigureTrayPopupButton(this);
@@ -114,6 +127,30 @@ FeaturePodLabelButton::FeaturePodLabelButton(views::ButtonListener* listener)
 
 FeaturePodLabelButton::~FeaturePodLabelButton() = default;
 
+void FeaturePodLabelButton::Layout() {
+  LayoutInCenter(label_, GetContentsBounds().y());
+  LayoutInCenter(sub_label_, GetContentsBounds().CenterPoint().y());
+
+  if (!detailed_view_arrow_->visible())
+    return;
+
+  // We need custom Layout() because |label_| is first laid out in the center
+  // without considering |detailed_view_arrow_|, then |detailed_view_arrow_| is
+  // placed on the right side of |label_|.
+  gfx::Size arrow_size = detailed_view_arrow_->GetPreferredSize();
+  detailed_view_arrow_->SetBoundsRect(gfx::Rect(
+      gfx::Point(label_->bounds().right() + kUnifiedFeaturePodArrowSpacing,
+                 label_->bounds().CenterPoint().y() - arrow_size.height() / 2),
+      arrow_size));
+}
+
+gfx::Size FeaturePodLabelButton::CalculatePreferredSize() const {
+  return gfx::Size(kUnifiedFeaturePodSize.width(),
+                   label_->GetPreferredSize().height() +
+                       sub_label_->GetPreferredSize().height() +
+                       GetInsets().height());
+}
+
 std::unique_ptr<views::InkDrop> FeaturePodLabelButton::CreateInkDrop() {
   auto ink_drop = TrayPopupUtils::CreateInkDrop(this);
   ink_drop->SetShowHighlightOnHover(true);
@@ -141,6 +178,7 @@ std::unique_ptr<views::InkDropMask> FeaturePodLabelButton::CreateInkDropMask()
 
 void FeaturePodLabelButton::SetLabel(const base::string16& label) {
   label_->SetText(label);
+  UpdateDetailedViewArrow();
   SetTooltipTextFromLabels();
   Layout();
   SchedulePaint();
@@ -153,12 +191,39 @@ void FeaturePodLabelButton::SetSubLabel(const base::string16& sub_label) {
   SchedulePaint();
 }
 
+void FeaturePodLabelButton::ShowDetailedViewArrow() {
+  show_detailed_view_arrow_ = true;
+  UpdateDetailedViewArrow();
+  Layout();
+  SchedulePaint();
+}
+
 void FeaturePodLabelButton::SetTooltipTextFromLabels() {
   SetTooltipText(
       l10n_util::GetStringFUTF16(IDS_ASH_STATUS_TRAY_FEATURE_POD_BUTTON_TOOLTIP,
                                  label_->text(), sub_label_->text()));
 }
 
+void FeaturePodLabelButton::LayoutInCenter(views::View* child, int y) {
+  gfx::Rect contents_bounds = GetContentsBounds();
+  gfx::Size preferred_size = child->GetPreferredSize();
+  int child_width = std::min(contents_bounds.width(), preferred_size.width());
+  child->SetBounds(
+      contents_bounds.x() + (contents_bounds.width() - child_width) / 2, y,
+      child_width, preferred_size.height());
+}
+
+void FeaturePodLabelButton::UpdateDetailedViewArrow() {
+  // If the feature pod button has a detailed view, and the label row has enough
+  // space to show the arrow, set the arrow visible.
+  detailed_view_arrow_->SetVisible(
+      show_detailed_view_arrow_ &&
+      label_->GetPreferredSize().width() +
+              detailed_view_arrow_->GetPreferredSize().width() +
+              kUnifiedFeaturePodArrowSpacing <=
+          GetPreferredSize().width() - GetInsets().width());
+}
+
 FeaturePodButton::FeaturePodButton(FeaturePodControllerBase* controller)
     : controller_(controller),
       icon_button_(new FeaturePodIconButton(this)),
@@ -193,6 +258,10 @@ void FeaturePodButton::SetSubLabel(const base::string16& sub_label) {
   label_button_->SetSubLabel(sub_label);
 }
 
+void FeaturePodButton::ShowDetailedViewArrow() {
+  label_button_->ShowDetailedViewArrow();
+}
+
 void FeaturePodButton::SetToggled(bool toggled) {
   icon_button_->SetToggled(toggled);
 }

ash/system/unified/feature_pod_button.h

@@ -11,6 +11,7 @@
 #include "ui/views/view.h"
 
 namespace views {
+class ImageView;
 class Label;
 }
 
@@ -58,7 +59,13 @@ class FeaturePodLabelButton : public views::Button {
   // See FeaturePodButton::SetSubLabel.
   void SetSubLabel(const base::string16& sub_label);
 
+  // Show arrow to indicate that the feature has a detailed view.
+  // See FeaturePodButton::ShowDetailedViewArrow.
+  void ShowDetailedViewArrow();
+
   // views::Button:
+  void Layout() override;
+  gfx::Size CalculatePreferredSize() const override;
   std::unique_ptr<views::InkDrop> CreateInkDrop() override;
   std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
   std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
@@ -68,9 +75,18 @@ class FeaturePodLabelButton : public views::Button {
  private:
   void SetTooltipTextFromLabels();
 
+  // Layout |child| in horizontal center with its vertical origin set to |y|.
+  void LayoutInCenter(views::View* child, int y);
+
+  // Hide detailed view arrow if there's no space for it.
+  void UpdateDetailedViewArrow();
+
   // Owned by views hierarchy.
   views::Label* const label_;
   views::Label* const sub_label_;
+  views::ImageView* const detailed_view_arrow_;
+
+  bool show_detailed_view_arrow_ = false;
 
   DISALLOW_COPY_AND_ASSIGN(FeaturePodLabelButton);
 };
@@ -95,6 +111,9 @@ class ASH_EXPORT FeaturePodButton : public views::View,
   // Set the text of sub-label shown below the label.
   void SetSubLabel(const base::string16& sub_label);
 
+  // Show arrow to indicate that the feature has a detailed view.
+  void ShowDetailedViewArrow();
+
   // Change the toggled state. If toggled, the background color of the circle
   // will change.
   void SetToggled(bool toggled);

ash/system/unified/quiet_mode_feature_pod_controller.cc

@@ -35,6 +35,7 @@ FeaturePodButton* QuietModeFeaturePodController::CreateButton() {
       !Shell::Get()->session_controller()->IsScreenLocked());
   button_->SetLabel(
       l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_NOTIFICATIONS_LABEL));
+  button_->ShowDetailedViewArrow();
   OnQuietModeChanged(MessageCenter::Get()->IsQuietMode());
   return button_;
 }