[CrOS PhoneHub] Create UI for quick actions in PhoneHub tray.

BUG=1106937,1126208

Change-Id: I7d54f5c4aeb9c6aa3243567e83dbd022e651c4ab
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2388168
Commit-Queue: Andre Le <leandre@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805431}

ash/BUILD.gn

@@ -1095,6 +1095,8 @@ component("ash") {
     "system/phonehub/phone_hub_tray.h",
     "system/phonehub/phone_status_view.cc",
     "system/phonehub/phone_status_view.h",
+    "system/phonehub/quick_actions_view.cc",
+    "system/phonehub/quick_actions_view.h",
     "system/power/backlights_forced_off_setter.cc",
     "system/power/backlights_forced_off_setter.h",
     "system/power/battery_notification.cc",

ash/ash_strings.grd

@@ -947,9 +947,34 @@ This file contains the strings for ash.
         Screenshots
       </message>
 
+      <!-- Phone Hub tray-->
       <message name="IDS_ASH_PHONE_HUB_TRAY_ACCESSIBLE_NAME" desc="The accessible name of the Phone Hub tray bubble for screen readers.">
         Phone Hub
       </message>
+      <message name="IDS_ASH_PHONE_HUB_ENABLE_HOTSPOT_TITLE" desc="Title of the enable hotspot toggle in the phone hub bubble.">
+        Enable Hotspot
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_SILENCE_PHONE_TITLE" desc="Title of the silence phone toggle in the phone hub bubble.">
+        Silence
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_LOCATE_PHONE_TITLE" desc="Title of the locate phone toggle in the phone hub bubble.">
+        Locate Phone
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_QUICK_ACTIONS_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in phone hube bubble to toggle quick actions feature on or off.">
+        Toggle <ph name="FEATURE_NAME">$1<ex>Silence</ex></ph>. <ph name="STATE_TEXT">$2<ex>Silence is on.</ex></ph>
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ENABLED_STATE_TOOLTIP" desc="The tooltip text indicating the quick actions feature is on.">
+        <ph name="FEATURE_NAME">$1<ex>Silence</ex></ph> is on.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_QUICK_ACTIONS_DISABLED_STATE_TOOLTIP" desc="The tooltip text indicating the quick actions feature is off.">
+        <ph name="FEATURE_NAME">$1<ex>Silence</ex></ph> is off.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_QUICK_ACTIONS_OFF_STATE" desc="Quick actions state in phone hub bubble." meaning="Quick actions feature is off.">
+        Off
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ON_STATE" desc="Quick actions state in phone hub bubble." meaning="Quick actions feature is on.">
+        On
+      </message>
 
       <message name="IDS_ASH_STYLUS_TOOLS_CAPTURE_REGION_ACTION" desc="Title of the capture region action in the stylus tools (a pop-up panel next to the status tray). This causes a partial screenshot to be taken (the user selects an area of the screen to take a screenshot of).">
         Capture region

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_ENABLE_HOTSPOT_TITLE.png.sha1

+9c58b5129b9ad36befda19e1ceb8687a4eacc00e
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_LOCATE_PHONE_TITLE.png.sha1

+6172ae58a33bef16a5311ed0193f132102818471
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_QUICK_ACTIONS_DISABLED_STATE_TOOLTIP.png.sha1

+709ad42ecbb382d4107229b120ed473b0ba8a8a4
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ENABLED_STATE_TOOLTIP.png.sha1

+6183d97d057122cdfa594efa5f278661154a0810
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_QUICK_ACTIONS_OFF_STATE.png.sha1

+fce2c61f96a2741dc3b58fabf0321865a76162de
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ON_STATE.png.sha1

+35c6dfd07e1391ba1caab2a7e9d13172289006f8
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_QUICK_ACTIONS_TOGGLE_TOOLTIP.png.sha1

+6183d97d057122cdfa594efa5f278661154a0810
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_SILENCE_PHONE_TITLE.png.sha1

+8cb7009e66bd5aec3c3eedc3a50cc8c0e2691b6c
\ No newline at end of file

ash/system/phonehub/phone_hub_tray.cc

@@ -11,6 +11,7 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/phonehub/phone_status_view.h"
+#include "ash/system/phonehub/quick_actions_view.h"
 #include "ash/system/tray/system_menu_button.h"
 #include "ash/system/tray/tray_bubble_wrapper.h"
 #include "ash/system/tray/tray_constants.h"
@@ -61,6 +62,9 @@ class PhoneHubView : public views ::View {
     separator->SetBorder(views::CreateEmptyBorder(
         gfx::Insets(kPaddingBetweenTitleAndSeparator, 0,
                     kMenuSeparatorVerticalPadding, 0)));
+
+    setup_layered_view(
+        bubble_view->AddChildView(std::make_unique<QuickActionsView>()));
   }
   ~PhoneHubView() override = default;
 

ash/system/phonehub/quick_actions_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 "ash/system/phonehub/quick_actions_view.h"
+
+#include "ash/resources/vector_icons/vector_icons.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/system/unified/feature_pod_button.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/views/layout/box_layout.h"
+
+namespace ash {
+
+namespace {
+
+constexpr int kQuickActionsItemSpacing = 36;
+constexpr int kQuickActionsItemLabelSize = 14;
+constexpr gfx::Insets kQuickActionsViewPadding(16, 4);
+
+void ConfigureLabel(views::Label* label, bool is_primary) {
+  label->SetAutoColorReadabilityEnabled(false);
+  label->SetSubpixelRenderingEnabled(false);
+  label->set_can_process_events_within_subtree(false);
+
+  auto type = is_primary
+                  ? AshColorProvider::ContentLayerType::kTextColorPrimary
+                  : AshColorProvider::ContentLayerType::kTextColorSecondary;
+  label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(type));
+
+  gfx::Font default_font;
+  gfx::Font label_font = default_font.Derive(
+      kQuickActionsItemLabelSize - default_font.GetFontSize(),
+      gfx::Font::NORMAL, gfx::Font::Weight::NORMAL);
+  gfx::FontList font_list(label_font);
+  label->SetFontList(font_list);
+}
+
+}  // namespace
+
+QuickActionsItem::QuickActionsItem(views::ButtonListener* listener,
+                                   const gfx::VectorIcon& vector_icon,
+                                   int label_id)
+    : icon_button_(new FeaturePodIconButton(listener, true /* is_togglable */)),
+      label_(new views::Label),
+      sub_label_(new views::Label) {
+  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kVertical, gfx::Insets(),
+      kUnifiedFeaturePodSpacing));
+  layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+
+  icon_button_ = AddChildView(std::make_unique<FeaturePodIconButton>(
+      listener, true /* is_togglable */));
+  icon_button_->SetVectorIcon(vector_icon);
+
+  auto* label_view = AddChildView(std::make_unique<views::View>());
+  label_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kVertical, gfx::Insets()));
+
+  label_ = label_view->AddChildView(
+      std::make_unique<views::Label>(l10n_util::GetStringUTF16(label_id)));
+  ConfigureLabel(label_, true /* is_primary */);
+
+  sub_label_ = label_view->AddChildView(std::make_unique<views::Label>());
+  ConfigureLabel(sub_label_, false /* is_primary */);
+
+  SetPaintToLayer();
+  layer()->SetFillsBoundsOpaquely(false);
+}
+
+QuickActionsItem::~QuickActionsItem() = default;
+
+void QuickActionsItem::SetSubLabel(const base::string16& sub_label) {
+  sub_label_->SetText(sub_label);
+}
+
+void QuickActionsItem::SetIconTooltip(const base::string16& text) {
+  icon_button_->SetTooltipText(text);
+}
+
+void QuickActionsItem::SetToggled(bool toggled) {
+  icon_button_->SetToggled(toggled);
+}
+
+const base::string16& QuickActionsItem::GetItemLabel() const {
+  return label_->GetText();
+}
+
+bool QuickActionsItem::HasFocus() const {
+  return icon_button_->HasFocus() || label_->HasFocus() ||
+         sub_label_->HasFocus();
+}
+
+void QuickActionsItem::RequestFocus() {
+  icon_button_->RequestFocus();
+}
+
+const char* QuickActionsItem::GetClassName() const {
+  return "QuickActionsItem";
+}
+
+QuickActionsView::QuickActionsView() {
+  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kHorizontal, kQuickActionsViewPadding,
+      kQuickActionsItemSpacing));
+  layout->set_main_axis_alignment(views::BoxLayout::MainAxisAlignment::kCenter);
+  layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+
+  enable_hotspot_ = AddChildView(std::make_unique<QuickActionsItem>(
+      this, kSystemMenuPhoneIcon, IDS_ASH_PHONE_HUB_ENABLE_HOTSPOT_TITLE));
+  silence_phone_ = AddChildView(std::make_unique<QuickActionsItem>(
+      this, kSystemMenuPhoneIcon, IDS_ASH_PHONE_HUB_SILENCE_PHONE_TITLE));
+  locate_phone_ = AddChildView(std::make_unique<QuickActionsItem>(
+      this, kSystemMenuPhoneIcon, IDS_ASH_PHONE_HUB_LOCATE_PHONE_TITLE));
+
+  Update();
+}
+
+QuickActionsView::~QuickActionsView() = default;
+
+void QuickActionsView::ButtonPressed(views::Button* sender,
+                                     const ui::Event& event) {
+  // TODO(leandre): implement quick actions button functionality.
+  if (sender == enable_hotspot_->icon_button()) {
+    UpdateItem(enable_hotspot_, !enable_hotspot_->IsToggled());
+  } else if (sender == silence_phone_->icon_button()) {
+    UpdateItem(silence_phone_, !silence_phone_->IsToggled());
+  } else if (sender == locate_phone_->icon_button()) {
+    UpdateItem(locate_phone_, !locate_phone_->IsToggled());
+  } else {
+    NOTREACHED();
+  }
+}
+
+void QuickActionsView::Update() {
+  // TODO(leandre): Update items according to phone status.
+  UpdateItem(enable_hotspot_, false);
+  UpdateItem(silence_phone_, true);
+  UpdateItem(locate_phone_, false);
+}
+
+void QuickActionsView::UpdateItem(QuickActionsItem* item, bool is_enabled) {
+  item->SetToggled(is_enabled);
+  item->SetSubLabel(l10n_util::GetStringUTF16(
+      is_enabled ? IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ON_STATE
+                 : IDS_ASH_PHONE_HUB_QUICK_ACTIONS_OFF_STATE));
+  int state_text_id =
+      is_enabled ? IDS_ASH_PHONE_HUB_QUICK_ACTIONS_ENABLED_STATE_TOOLTIP
+                 : IDS_ASH_PHONE_HUB_QUICK_ACTIONS_DISABLED_STATE_TOOLTIP;
+  base::string16 tooltip_state =
+      l10n_util::GetStringFUTF16(state_text_id, item->GetItemLabel());
+  item->SetIconTooltip(
+      l10n_util::GetStringFUTF16(IDS_ASH_PHONE_HUB_QUICK_ACTIONS_TOGGLE_TOOLTIP,
+                                 item->GetItemLabel(), tooltip_state));
+}
+
+}  // namespace ash

ash/system/phonehub/quick_actions_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 ASH_SYSTEM_PHONEHUB_QUICK_ACTIONS_VIEW_H_
+#define ASH_SYSTEM_PHONEHUB_QUICK_ACTIONS_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/unified/feature_pod_button.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/controls/label.h"
+
+namespace ash {
+
+// A toggle button with labels used in the quick actions view.
+class QuickActionsItem : public views::View {
+ public:
+  explicit QuickActionsItem(views::ButtonListener* listener,
+                            const gfx::VectorIcon& vector_icon,
+                            int label_id);
+  ~QuickActionsItem() override;
+  QuickActionsItem(QuickActionsItem&) = delete;
+  QuickActionsItem operator=(QuickActionsItem&) = delete;
+
+  // Set the text of sub-label shown below the label.
+  void SetSubLabel(const base::string16& sub_label);
+
+  // Set the tooltip text of the icon button.
+  void SetIconTooltip(const base::string16& text);
+
+  // Change the toggled state. If toggled, the background color of the circle
+  // will change.
+  void SetToggled(bool toggled);
+  bool IsToggled() const { return icon_button_->toggled(); }
+
+  // Get the title/label text of the item.
+  const base::string16& GetItemLabel() const;
+
+  // views::View:
+  bool HasFocus() const override;
+  void RequestFocus() override;
+  const char* GetClassName() const override;
+
+  FeaturePodIconButton* icon_button() const { return icon_button_; }
+
+ private:
+  // Owned by views hierarchy.
+  FeaturePodIconButton* icon_button_ = nullptr;
+  views::Label* label_ = nullptr;
+  views::Label* sub_label_ = nullptr;
+};
+
+// A view in Phone Hub bubble that contains toggle button for quick actions such
+// as enable hotspot, silence phone and locate phone.
+class ASH_EXPORT QuickActionsView : public views::View,
+                                    public views::ButtonListener {
+ public:
+  QuickActionsView();
+  ~QuickActionsView() override;
+  QuickActionsView(QuickActionsView&) = delete;
+  QuickActionsView operator=(QuickActionsView&) = delete;
+
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  void Update();
+  void UpdateItem(QuickActionsItem* item, bool is_enabled);
+
+  QuickActionsItem* enable_hotspot_ = nullptr;
+  QuickActionsItem* silence_phone_ = nullptr;
+  QuickActionsItem* locate_phone_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_QUICK_ACTIONS_VIEW_H_