[CrOS PhoneHub] Add initial connecting UI.

This CL adds the initial connecting UI that will show up when the device
is trying to connect with the phone when user has opted in the Phone Hub
feature. Remaining work includes implementing the button click handler.

Demo: https://screenshot.googleplex.com/BeLuL2JWNbmmZLs.png

Misc:
Refactors the |SetButtons| API to use unique_ptr.

BUG=1106937,1126208

Change-Id: I537c1da298fbaf4fb67d0df38712618e2496fb3b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2414127
Commit-Queue: Meilin Wang <meilinw@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808539}

ash/BUILD.gn

@@ -1101,6 +1101,8 @@ component("ash") {
     "system/palette/tools/metalayer_mode.h",
     "system/phonehub/continue_browsing_chip.cc",
     "system/phonehub/continue_browsing_chip.h",
+    "system/phonehub/initial_connecting_view.cc",
+    "system/phonehub/initial_connecting_view.h",
     "system/phonehub/onboarding_view.cc",
     "system/phonehub/onboarding_view.h",
     "system/phonehub/phone_hub_interstitial_view.cc",

ash/ash_strings.grd

@@ -999,6 +999,15 @@ This file contains the strings for ash.
       <message name="IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_GET_STARTED_BUTTON" desc="Get started button on the onboarding dialog for user to opt in this feature and start the consent flow.">
         Get started
       </message>
+      <message name="IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_TITLE" desc="The title of the initial connecting dialog that indicates the device is trying to connect to your phone after the user has opted in the Phone Hub feature.">
+        Connecting to your phone...
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_DESCRIPTION" desc="The description of the onboarding dialog that indicates the device is trying to connect to your phone after the user has opted in the Phone Hub feature." translateable="false">
+        Make sure your phone is nearby with Bluetooth and Wi-Fi turned on.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_CANCEL_BUTTON" desc="Cancel button on the initial connecting dialog to cancel the connection attempt to your phone.">
+        Cancel
+      </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_INITIAL_CONNECTING_DIALOG_CANCEL_BUTTON.png.sha1

+37ef1138ef0c954ba56d19bd8c3911463e2a7701
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_DESCRIPTION.png.sha1

+0b45af8839833cef94368b5f2d8a32985879a6f0
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_TITLE.png.sha1

+66c77af10cb52b8d8b2e28a881c346c5cdcb1083
\ No newline at end of file

ash/public/cpp/resources/ash_public_unscaled_resources.grd

@@ -20,6 +20,7 @@
       <include name="IDR_DISCOVER_APP_192" file="unscaled_resources/discover_app_logo_192.png" type="BINDATA" />
       <include name="IDR_RELEASE_NOTES_APP_192" file="unscaled_resources/release_notes_logo_192.png" type="BINDATA" />
       <include name="IDR_PHONE_HUB_ONBOARDING_IMAGE" file="unscaled_resources/phone_hub_onboarding_image.png" type="BINDATA" />
+      <include name="IDR_PHONE_HUB_CONNECTING_IMAGE" file="unscaled_resources/phone_hub_connecting_image.png" type="BINDATA" />
     </includes>
   </release>
 </grit>

ash/system/phonehub/initial_connecting_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/initial_connecting_view.h"
+
+#include <algorithm>
+#include <memory>
+#include <vector>
+
+#include "ash/public/cpp/resources/grit/ash_public_unscaled_resources.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
+#include "ash/system/phonehub/phone_hub_interstitial_view.h"
+#include "base/strings/string16.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/base/resource/resource_bundle.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/controls/button/label_button.h"
+#include "ui/views/layout/fill_layout.h"
+
+namespace ash {
+
+InitialConnectingView::InitialConnectingView() {
+  SetLayoutManager(std::make_unique<views::FillLayout>());
+  content_view_ = AddChildView(
+      std::make_unique<PhoneHubInterstitialView>(/*show_progress=*/true));
+
+  // TODO(crbug.com/1127996): Replace PNG file with vector icon.
+  gfx::ImageSkia* image =
+      ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
+          IDR_PHONE_HUB_CONNECTING_IMAGE);
+  content_view_->SetImage(*image);
+  content_view_->SetTitle(l10n_util::GetStringUTF16(
+      IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_TITLE));
+  content_view_->SetDescription(l10n_util::GetStringUTF16(
+      IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_DESCRIPTION));
+
+  // Add "Cancel" button for canceling the connection attempt.
+  auto cancel = std::make_unique<views::LabelButton>(
+      this, l10n_util::GetStringUTF16(
+                IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_CANCEL_BUTTON));
+  cancel->SetEnabledTextColors(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextColorPrimary));
+  content_view_->AddButton(std::move(cancel));
+}
+
+InitialConnectingView::~InitialConnectingView() = default;
+
+void InitialConnectingView::ButtonPressed(views::Button* sender,
+                                          const ui::Event& event) {
+  // TODO(meilinw): implement button pressed actions.
+}
+
+BEGIN_METADATA(InitialConnectingView, views::View)
+END_METADATA
+
+}  // namespace ash

ash/system/phonehub/initial_connecting_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_INITIAL_CONNECTING_VIEW_H_
+#define ASH_SYSTEM_PHONEHUB_INITIAL_CONNECTING_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_interstitial_view.h"
+#include "ui/views/controls/button/button.h"
+#include "ui/views/metadata/metadata_header_macros.h"
+
+namespace ash {
+
+class PhoneHubInterstitialView;
+
+// An interstitial view representing this device is trying to connect to your
+// phone after the user has opted in the Phone Hub feature through the
+// onboarding UI.
+class ASH_EXPORT InitialConnectingView : public views::View,
+                                         public views::ButtonListener {
+ public:
+  METADATA_HEADER(InitialConnectingView);
+
+  InitialConnectingView();
+  InitialConnectingView(const InitialConnectingView&) = delete;
+  InitialConnectingView& operator=(const InitialConnectingView&) = delete;
+  ~InitialConnectingView() override;
+
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  // Responsible for displaying the connecting UI contents.
+  // Owned by view hierarchy.
+  PhoneHubInterstitialView* content_view_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_INITIAL_CONNECTING_VIEW_H_

ash/system/phonehub/onboarding_view.cc

@@ -32,10 +32,10 @@ constexpr int kGetStartedTag = 2;
 
 OnboardingView::OnboardingView() {
   SetLayoutManager(std::make_unique<views::FillLayout>());
-  content_view_ = AddChildView(std::make_unique<PhoneHubInterstitialView>());
+  content_view_ = AddChildView(
+      std::make_unique<PhoneHubInterstitialView>(/*show_progress=*/true));
 
-  // TODO(meilinw): Replace PNG file with vector icon. See
-  // https://crbug.com/1127996.
+  // TODO(crbug.com/1127996): Replace PNG file with vector icon.
   gfx::ImageSkia* image =
       ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
           IDR_PHONE_HUB_ONBOARDING_IMAGE);
@@ -46,18 +46,19 @@ OnboardingView::OnboardingView() {
       IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_DESCRIPTION));
 
   // Add "Dismiss" and "Get started" buttons.
-  auto* dismiss = new views::LabelButton(
+  auto dismiss = std::make_unique<views::LabelButton>(
       this, l10n_util::GetStringUTF16(
                 IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_DISMISS_BUTTON));
   dismiss->SetEnabledTextColors(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
   dismiss->set_tag(kDismissButtonTag);
+  content_view_->AddButton(std::move(dismiss));
 
-  auto* get_started = new RoundedLabelButton(
+  auto get_started = std::make_unique<RoundedLabelButton>(
       this, l10n_util::GetStringUTF16(
                 IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_GET_STARTED_BUTTON));
   get_started->set_tag(kGetStartedTag);
-  content_view_->SetButtons({std::move(dismiss), std::move(get_started)});
+  content_view_->AddButton(std::move(get_started));
 }
 
 OnboardingView::~OnboardingView() = default;

ash/system/phonehub/phone_hub_interstitial_view.cc

@@ -7,7 +7,9 @@
 #include <memory>
 
 #include "ash/public/cpp/resources/grit/ash_public_unscaled_resources.h"
+#include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/unified/rounded_label_button.h"
 #include "base/strings/string16.h"
@@ -20,6 +22,7 @@
 #include "ui/views/controls/button/button.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/label.h"
+#include "ui/views/controls/progress_bar.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/grid_layout.h"
 
@@ -37,6 +40,8 @@ constexpr int kVerticalPaddingDip = 20;
 constexpr int kTitleBottomPaddingDip = 10;
 constexpr int kButtonSpacingDip = 10;
 constexpr int kButtonContainerTopPaddingDip = 45;
+constexpr int kProgressBarHeightDip = 2;
+constexpr double kInfiniteLoadingProgressValue = -1.0;
 
 // Adds a ColumnSet on |layout| with a single View column and padding columns
 // on either side of it with |padding| width.
@@ -52,8 +57,8 @@ void AddColumnWithSidePadding(views::GridLayout* layout, int padding, int id) {
 
 }  // namespace
 
-PhoneHubInterstitialView::PhoneHubInterstitialView() {
-  InitLayout();
+PhoneHubInterstitialView::PhoneHubInterstitialView(bool show_progress) {
+  InitLayout(show_progress);
 }
 
 PhoneHubInterstitialView::~PhoneHubInterstitialView() = default;
@@ -76,29 +81,47 @@ void PhoneHubInterstitialView::SetDescription(const base::string16& desc) {
   description_->SetText(desc);
 }
 
-void PhoneHubInterstitialView::SetButtons(
-    const std::vector<views::Button*>& buttons) {
-  for (auto* button : buttons)
-    button_container_->AddChildView(std::move(button));
+void PhoneHubInterstitialView::AddButton(
+    std::unique_ptr<views::Button> button) {
+  button_container_->AddChildView(std::move(button));
 }
 
-void PhoneHubInterstitialView::InitLayout() {
+void PhoneHubInterstitialView::InitLayout(bool show_progress) {
   SetPaintToLayer();
   layer()->SetFillsBoundsOpaquely(false);
 
   // Set up layout column.
   views::GridLayout* layout =
       SetLayoutManager(std::make_unique<views::GridLayout>());
-  const int kColumnSetId = 0;
-  AddColumnWithSidePadding(layout, kHorizontalPaddingDip, kColumnSetId);
+  const int kFirstColumnSetId = 0;
+  // Set up the first column set to layout the progressing bar if needed.
+  views::ColumnSet* column_set = layout->AddColumnSet(kFirstColumnSetId);
+  column_set->AddColumn(views::GridLayout::Alignment::FILL,
+                        views::GridLayout::CENTER, 1,
+                        views::GridLayout::ColumnSize::kFixed, 0, 0);
+  // Set up the second column set with horizontal paddings to layout the image,
+  // text and buttons.
+  const int kSecondColumnSetId = 1;
+  AddColumnWithSidePadding(layout, kHorizontalPaddingDip, kSecondColumnSetId);
+
+  if (show_progress) {
+    // Set up layout row for the progress bar if |show_progess| is true.
+    layout->StartRow(views::GridLayout::kFixedSize, kFirstColumnSetId);
+    progress_bar_ = layout->AddView(
+        std::make_unique<views::ProgressBar>(kProgressBarHeightDip));
+    progress_bar_->SetForegroundColor(
+        AshColorProvider::Get()->GetContentLayerColor(
+            AshColorProvider::ContentLayerType::kIconColorProminent));
+    progress_bar_->SetValue(kInfiniteLoadingProgressValue);
+  }
 
   // Set up layout row for the image view.
-  layout->StartRow(views::GridLayout::kFixedSize, kColumnSetId);
+  layout->StartRow(views::GridLayout::kFixedSize, kSecondColumnSetId);
   image_ = layout->AddView(std::make_unique<views::ImageView>());
   image_->SetImageSize(gfx::Size(kImageWidthDip, kImageHeightDip));
 
   // Set up layout row for the title view, which should be left-aligned.
-  layout->StartRow(views::GridLayout::kFixedSize, kColumnSetId);
+  layout->StartRow(views::GridLayout::kFixedSize, kSecondColumnSetId);
   title_ =
       layout->AddView(std::make_unique<views::Label>(), 1, 1,
                       views::GridLayout::LEADING, views::GridLayout::CENTER);
@@ -106,7 +129,7 @@ void PhoneHubInterstitialView::InitLayout() {
   title_style.SetupLabel(title_);
 
   // Set up layout row for the multi-line description view.
-  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kColumnSetId,
+  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kSecondColumnSetId,
                               views::GridLayout::kFixedSize,
                               kTitleBottomPaddingDip);
   description_ = layout->AddView(std::make_unique<views::Label>());
@@ -118,7 +141,7 @@ void PhoneHubInterstitialView::InitLayout() {
 
   // Set up the layout row for the button container view, which should be
   // right-aligned.
-  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kColumnSetId,
+  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kSecondColumnSetId,
                               views::GridLayout::kFixedSize,
                               kButtonContainerTopPaddingDip);
   button_container_ =

ash/system/phonehub/phone_hub_interstitial_view.h

@@ -8,6 +8,7 @@
 #include <vector>
 
 #include "ash/ash_export.h"
+#include "ui/views/controls/progress_bar.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"
 
@@ -16,6 +17,7 @@ class Button;
 class ImageView;
 class ImageSkia;
 class Label;
+class ProgressBar;
 }  // namespace views
 
 namespace ash {
@@ -26,7 +28,7 @@ class ASH_EXPORT PhoneHubInterstitialView : public views::View {
  public:
   METADATA_HEADER(PhoneHubInterstitialView);
 
-  PhoneHubInterstitialView();
+  explicit PhoneHubInterstitialView(bool show_progress);
   PhoneHubInterstitialView(const PhoneHubInterstitialView&) = delete;
   PhoneHubInterstitialView& operator=(const PhoneHubInterstitialView&) = delete;
   ~PhoneHubInterstitialView() override;
@@ -34,11 +36,14 @@ class ASH_EXPORT PhoneHubInterstitialView : public views::View {
   void SetImage(const gfx::ImageSkia& image);
   void SetTitle(const base::string16& title);
   void SetDescription(const base::string16& desc);
-  void SetButtons(const std::vector<views::Button*>& buttons);
+  void AddButton(std::unique_ptr<views::Button> button);
 
  private:
-  void InitLayout();
+  void InitLayout(bool show_progress);
 
+  // A progress bar will be shown under the title row if |show_progress| is
+  // true.
+  views::ProgressBar* progress_bar_ = nullptr;
   views::ImageView* image_ = nullptr;
   views::Label* title_ = nullptr;
   views::Label* description_ = nullptr;