[CrOS PhoneHub] Create UI for phone status in PhoneHub tray.

BUG=1106937,1126208

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

ash/BUILD.gn

@@ -1093,6 +1093,8 @@ component("ash") {
     "system/palette/tools/metalayer_mode.h",
     "system/phonehub/phone_hub_tray.cc",
     "system/phonehub/phone_hub_tray.h",
+    "system/phonehub/phone_status_view.cc",
+    "system/phonehub/phone_status_view.h",
     "system/power/backlights_forced_off_setter.cc",
     "system/power/backlights_forced_off_setter.h",
     "system/power/battery_notification.cc",

ash/system/phonehub/phone_hub_tray.cc

@@ -10,6 +10,7 @@
 #include "ash/shell.h"
 #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/tray/system_menu_button.h"
 #include "ash/system/tray/tray_bubble_wrapper.h"
 #include "ash/system/tray/tray_constants.h"
@@ -35,6 +36,38 @@ namespace {
 constexpr int kTrayIconMainAxisInset = 8;
 constexpr int kTrayIconCrossAxisInset = 0;
 
+constexpr gfx::Insets kBubblePadding(4, 16);
+constexpr int kBubbleWidth = 400;
+constexpr int kPaddingBetweenTitleAndSeparator = 3;
+
+// A view of the Phone Hub panel, displaying phone status and utility actions
+// such as phone status, task continuation, etc.
+class PhoneHubView : public views ::View {
+ public:
+  explicit PhoneHubView(TrayBubbleView* bubble_view) {
+    auto setup_layered_view = [](views::View* view) {
+      view->SetPaintToLayer();
+      view->layer()->SetFillsBoundsOpaquely(false);
+    };
+
+    setup_layered_view(
+        bubble_view->AddChildView(std::make_unique<PhoneStatusView>()));
+
+    auto* separator =
+        bubble_view->AddChildView(std::make_unique<views::Separator>());
+    setup_layered_view(separator);
+    separator->SetColor(AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kSeparatorColor));
+    separator->SetBorder(views::CreateEmptyBorder(
+        gfx::Insets(kPaddingBetweenTitleAndSeparator, 0,
+                    kMenuSeparatorVerticalPadding, 0)));
+  }
+  ~PhoneHubView() override = default;
+
+  // views::View:
+  const char* GetClassName() const override { return "PhoneHubView"; }
+};
+
 }  // namespace
 
 PhoneHubTray::PhoneHubTray(Shelf* shelf) : TrayBackgroundView(shelf) {
@@ -115,7 +148,7 @@ void PhoneHubTray::ShowBubble(bool show_by_click) {
   init_params.parent_window = GetBubbleWindowContainer();
   init_params.anchor_view = GetBubbleAnchor();
   init_params.shelf_alignment = shelf()->alignment();
-  init_params.preferred_width = kTrayMenuWidth;
+  init_params.preferred_width = kBubbleWidth;
   init_params.close_on_deactivate = true;
   init_params.has_shadow = false;
   init_params.translucent = true;
@@ -125,9 +158,9 @@ void PhoneHubTray::ShowBubble(bool show_by_click) {
   TrayBubbleView* bubble_view = new TrayBubbleView(init_params);
   bubble_view->set_anchor_view_insets(GetBubbleAnchorInsets());
   bubble_view->set_margins(GetSecondaryBubbleInsets());
+  bubble_view->SetBorder(views::CreateEmptyBorder(kBubblePadding));
 
-  // TODO(tengs): Implement the PhoneHub UI view.
-  bubble_view->AddChildView(std::make_unique<views::Label>());
+  bubble_view->AddChildView(std::make_unique<PhoneHubView>(bubble_view));
 
   bubble_ = std::make_unique<TrayBubbleWrapper>(this, bubble_view,
                                                 false /* is_persistent */);

ash/system/phonehub/phone_status_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/phone_status_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/tray/tray_popup_item_style.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/geometry/insets.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/controls/image_view.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/layout/box_layout.h"
+
+namespace ash {
+
+namespace {
+
+constexpr int kTitleContainerSpacing = 16;
+
+views::ImageView* CreateTitleIcon(const gfx::VectorIcon& vector_icon,
+                                  int tooltip_text_id) {
+  auto* icon = new views::ImageView();
+  icon->set_tooltip_text(l10n_util::GetStringUTF16(tooltip_text_id));
+  icon->SetImage(CreateVectorIcon(
+      vector_icon, AshColorProvider::Get()->GetContentLayerColor(
+                       AshColorProvider::ContentLayerType::kIconColorPrimary)));
+  return icon;
+}
+
+}  // namespace
+
+PhoneStatusView::PhoneStatusView() : TriView(kTitleContainerSpacing) {
+  ConfigureTriViewContainer(TriView::Container::START);
+  ConfigureTriViewContainer(TriView::Container::CENTER);
+  ConfigureTriViewContainer(TriView::Container::END);
+
+  // TODO(leandre): Update title and icons according to phone status.
+  auto* title_label = new views::Label(
+      l10n_util::GetStringUTF16(IDS_ASH_PHONE_HUB_TRAY_ACCESSIBLE_NAME));
+  title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SUB_HEADER,
+                           true /* use_unified_theme */);
+  style.SetupLabel(title_label);
+  AddView(TriView::Container::CENTER, title_label);
+
+  wifi_icon_ = CreateTitleIcon(kUnifiedMenuWifiNoConnectionIcon,
+                               IDS_ASH_STATUS_TRAY_NO_NETWORKS);
+  AddView(TriView::Container::END, wifi_icon_);
+
+  volume_icon_ = CreateTitleIcon(kSystemMenuVolumeMuteIcon,
+                                 IDS_ASH_STATUS_TRAY_VOLUME_STATE_MUTED);
+  AddView(TriView::Container::END, volume_icon_);
+
+  battery_icon_ =
+      CreateTitleIcon(kBatteryIcon, IDS_ASH_STATUS_TRAY_BATTERY_FULL);
+  AddView(TriView::Container::END, battery_icon_);
+
+  settings_button_ = new TopShortcutButton(this, kSystemMenuSettingsIcon,
+                                           IDS_ASH_STATUS_TRAY_SETTINGS);
+  AddView(TriView::Container::END, settings_button_);
+}
+
+PhoneStatusView::~PhoneStatusView() = default;
+
+void PhoneStatusView::ButtonPressed(views::Button* sender,
+                                    const ui::Event& event) {
+  // TODO(leandre): implement open settings/other buttons.
+}
+
+void PhoneStatusView::ConfigureTriViewContainer(TriView::Container container) {
+  std::unique_ptr<views::BoxLayout> layout;
+
+  switch (container) {
+    case TriView::Container::START:
+      FALLTHROUGH;
+    case TriView::Container::END:
+      layout = std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
+          kUnifiedTopShortcutSpacing);
+      layout->set_main_axis_alignment(
+          views::BoxLayout::MainAxisAlignment::kCenter);
+      layout->set_cross_axis_alignment(
+          views::BoxLayout::CrossAxisAlignment::kCenter);
+      break;
+    case TriView::Container::CENTER:
+      SetFlexForContainer(TriView::Container::CENTER, 1.f);
+
+      layout = std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kVertical);
+      layout->set_main_axis_alignment(
+          views::BoxLayout::MainAxisAlignment::kCenter);
+      layout->set_cross_axis_alignment(
+          views::BoxLayout::CrossAxisAlignment::kStretch);
+      break;
+  }
+
+  SetContainerLayout(container, std::move(layout));
+  SetMinSize(container, gfx::Size(0, kUnifiedDetailedViewTitleRowHeight));
+}
+
+}  // namespace ash

ash/system/phonehub/phone_status_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_PHONE_STATUS_VIEW_H_
+#define ASH_SYSTEM_PHONEHUB_PHONE_STATUS_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/tray/tri_view.h"
+#include "ash/system/unified/top_shortcut_button.h"
+#include "ui/views/controls/button/button.h"
+
+namespace views {
+class ImageView;
+}
+
+namespace ash {
+
+// The header row at the top of the Phone Hub panel, showing phone title and
+// status (wifi, volime, etc.).
+class ASH_EXPORT PhoneStatusView : public TriView,
+                                   public views::ButtonListener {
+ public:
+  PhoneStatusView();
+  ~PhoneStatusView() override;
+  PhoneStatusView(PhoneStatusView&) = delete;
+  PhoneStatusView operator=(PhoneStatusView&) = delete;
+
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  void ConfigureTriViewContainer(TriView::Container container);
+
+  views::ImageView* wifi_icon_ = nullptr;
+  views::ImageView* volume_icon_ = nullptr;
+  views::ImageView* battery_icon_ = nullptr;
+  TopShortcutButton* settings_button_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_PHONE_STATUS_VIEW_H_