[CrOS PhoneHub] Add onboarding dismiss UI.

This CL adds a new onboarding dismiss prompt by:
- Introduced a superclass |PhoneHubContentView| for all content views
  with an |OnBubbleClose| function.
- Separate the previous |OnboardingView| to |OnboardingMainView| which
  is responsible for displaying the main page of the onboarding view,
  and |OnboardingDismissPromptView| which is responsible for displaying
  the dismiss prompt.
- Refactors the content view classes to inherit from the superclass.
- Updates and refactors the unittest.

Screenshot: https://screenshot.googleplex.com/7vqNqrD9im5vvVS.png

Future work:
Update the UI to spec by removing the phone status bar.

BUG=1106937,1126208

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

ash/BUILD.gn

@@ -1162,6 +1162,8 @@ component("ash") {
     "system/phonehub/onboarding_view.h",
     "system/phonehub/phone_connected_view.cc",
     "system/phonehub/phone_connected_view.h",
+    "system/phonehub/phone_hub_content_view.cc",
+    "system/phonehub/phone_hub_content_view.h",
     "system/phonehub/phone_hub_interstitial_view.cc",
     "system/phonehub/phone_hub_interstitial_view.h",
     "system/phonehub/phone_hub_metrics.cc",
@@ -2158,7 +2160,6 @@ test("ash_unittests") {
     "system/palette/tools/create_note_unittest.cc",
     "system/palette/tools/metalayer_unittest.cc",
     "system/palette/tools/screenshot_unittest.cc",
-    "system/phonehub/onboarding_view_unittest.cc",
     "system/phonehub/phone_hub_notification_controller_unittest.cc",
     "system/phonehub/phone_hub_tray_unittest.cc",
     "system/phonehub/phone_hub_ui_controller_unittest.cc",

ash/ash_strings.grd

@@ -1064,6 +1064,18 @@ 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_ONBOARDING_DISMISS_DIALOG_TITLE" desc="The title of the dialog that pops up after user clicks the dismiss button on the onboarding dialog.">
+        Set up Phone Hub later
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_DESCRIPTION_PART_1" desc="The description of the dialog that pops up after user clicks the dismiss button on the onboarding dialog. Also see IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_DESCRIPTION_PART_2." translateable="false">
+        View quick actions to extend the phone internet connection, control DND and locate your phone. Also view active Chrome tabs from your phone on your Chromebook.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_DESCRIPTION_PART_2" desc="The description of the dialog that pops up after user clicks the dismiss button on the onboarding dialog. Also see IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_DESCRIPTION_PART_1." translateable="false">
+        You can always set up later from Settings.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_OK_BUTTON" desc="Confirm button on the onboarding dismiss dialog to acknowledge.">
+        Ok, got it
+      </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>

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_DESCRIPTION.png.sha1

+f5e31259e5b435facade2be2252866c432c865c2
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_OK_BUTTON.png.sha1

+dd7eee95aaa308c38ffacf4198c1c8618c8029b4
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_ONBOARDING_DISMISS_DIALOG_TITLE.png.sha1

+68d5ed6007081a9bfe3bd806155fbc65337cd038
\ No newline at end of file

ash/system/phonehub/bluetooth_disabled_view.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_BLUETOOTH_DISABLED_VIEW_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ui/views/controls/button/button.h"
 
 namespace ash {
@@ -14,7 +15,7 @@ class PhoneHubInterstitialView;
 
 // An interstitial view representing an error state where the Phone Hub
 // feature is not available because Bluetooth is turned off on this device.
-class ASH_EXPORT BluetoothDisabledView : public views::View,
+class ASH_EXPORT BluetoothDisabledView : public PhoneHubContentView,
                                          public views::ButtonListener {
  public:
   METADATA_HEADER(BluetoothDisabledView);

ash/system/phonehub/connection_error_view.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_CONNECTION_ERROR_VIEW_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ui/views/controls/button/button.h"
 
 namespace chromeos {
@@ -20,7 +21,7 @@ class PhoneHubInterstitialView;
 
 // An interstitial view represeting that the Phone Hub feature is not available
 // due to connection issues.
-class ASH_EXPORT ConnectionErrorView : public views::View,
+class ASH_EXPORT ConnectionErrorView : public PhoneHubContentView,
                                        public views::ButtonListener {
  public:
   METADATA_HEADER(ConnectionErrorView);

ash/system/phonehub/initial_connecting_view.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_INITIAL_CONNECTING_VIEW_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"
 
@@ -16,7 +17,7 @@ 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 {
+class ASH_EXPORT InitialConnectingView : public PhoneHubContentView {
  public:
   METADATA_HEADER(InitialConnectingView);
 

ash/system/phonehub/onboarding_view.h

@@ -5,7 +5,11 @@
 #ifndef ASH_SYSTEM_PHONEHUB_ONBOARDING_VIEW_H_
 #define ASH_SYSTEM_PHONEHUB_ONBOARDING_VIEW_H_
 
+#include <memory>
+
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
+#include "ash/system/tray/tray_bubble_view.h"
 #include "ui/views/controls/button/button.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"
@@ -21,27 +25,32 @@ namespace ash {
 class PhoneHubInterstitialView;
 
 // An additional entry point UI to ask the existing multidevice users to opt in
-// and set up the Phone feature on this device.
-class ASH_EXPORT OnboardingView : public views::View,
-                                  public views::ButtonListener {
+// and set up the Phone feature on this device. Note that this class handles
+// both the main onboarding screen and the dismiss prompt together.
+class ASH_EXPORT OnboardingView : public PhoneHubContentView {
  public:
   METADATA_HEADER(OnboardingView);
 
-  explicit OnboardingView(
-      chromeos::phonehub::OnboardingUiTracker* onboarding_ui_tracker);
+  OnboardingView(chromeos::phonehub::OnboardingUiTracker* onboarding_ui_tracker,
+                 TrayBubbleView* bubble_view);
   OnboardingView(const OnboardingView&) = delete;
   OnboardingView& operator=(const OnboardingView&) = delete;
   ~OnboardingView() override;
 
-  // views::ButtonListener:
-  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+  // Update |content_view_| to display the dismiss prompt contents.
+  // Invoked when user clicks the "Dismiss" button on the main onboarding view.
+  void ShowDismissPrompt();
 
- private:
-  chromeos::phonehub::OnboardingUiTracker* onboarding_ui_tracker_ = nullptr;
+  // PhoneHubContentView:
+  void OnBubbleClose() override;
 
+ private:
   // The view responsible for displaying the onboarding UI contents.
   // Owned by view hierarchy.
-  PhoneHubInterstitialView* content_view_ = nullptr;
+  PhoneHubInterstitialView* main_view_ = nullptr;
+
+  chromeos::phonehub::OnboardingUiTracker* onboarding_ui_tracker_ = nullptr;
+  TrayBubbleView* bubble_view_ = nullptr;
 };
 
 }  // namespace ash

ash/system/phonehub/onboarding_view_unittest.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/onboarding_view.h"
-
-#include <memory>
-
-#include "ash/public/cpp/test/test_system_tray_client.h"
-#include "ash/system/phonehub/phone_hub_view_ids.h"
-#include "ash/test/ash_test_base.h"
-#include "base/test/scoped_feature_list.h"
-#include "chromeos/components/phonehub/fake_onboarding_ui_tracker.h"
-#include "chromeos/constants/chromeos_features.h"
-
-namespace ash {
-
-class OnboardingViewTest : public AshTestBase {
- public:
-  OnboardingViewTest() = default;
-  ~OnboardingViewTest() override = default;
-
-  // AshTestBase:
-  void SetUp() override {
-    feature_list_.InitAndEnableFeature(chromeos::features::kPhoneHub);
-    AshTestBase::SetUp();
-
-    onboarding_view_ =
-        std::make_unique<OnboardingView>(&fake_onboarding_ui_tracker_);
-  }
-
-  void TearDown() override {
-    onboarding_view_.reset();
-    AshTestBase::TearDown();
-  }
-
- protected:
-  OnboardingView* onboarding_view() { return onboarding_view_.get(); }
-
-  views::Button* get_started_button() {
-    return static_cast<views::Button*>(onboarding_view_->GetViewByID(
-        PhoneHubViewID::kOnboardingGetStartedButton));
-  }
-
-  views::Button* dismiss_button() {
-    return static_cast<views::Button*>(onboarding_view_->GetViewByID(
-        PhoneHubViewID::kOnboardingDismissButton));
-  }
-
-  chromeos::phonehub::FakeOnboardingUiTracker* fake_onboarding_ui_tracker() {
-    return &fake_onboarding_ui_tracker_;
-  }
-
- private:
-  base::test::ScopedFeatureList feature_list_;
-  chromeos::phonehub::FakeOnboardingUiTracker fake_onboarding_ui_tracker_;
-  std::unique_ptr<OnboardingView> onboarding_view_ = nullptr;
-};
-
-TEST_F(OnboardingViewTest, PressGetStartedButton) {
-  EXPECT_EQ(0u, fake_onboarding_ui_tracker()->handle_get_started_call_count());
-
-  // Simulates a mouse press on the Get started button.
-  onboarding_view()->ButtonPressed(
-      get_started_button(),
-      ui::MouseEvent(ui::ET_MOUSE_PRESSED, gfx::PointF(), gfx::PointF(),
-                     base::TimeTicks(), 0, 0));
-
-  // Pressing Get started button should invoke the |HandleGetStarted| call.
-  EXPECT_EQ(1u, fake_onboarding_ui_tracker()->handle_get_started_call_count());
-}
-
-TEST_F(OnboardingViewTest, PressDismissButton) {
-  fake_onboarding_ui_tracker()->SetShouldShowOnboardingUi(true);
-
-  // Simulates a mouse press on the Dismiss button.
-  onboarding_view()->ButtonPressed(
-      dismiss_button(), ui::MouseEvent(ui::ET_MOUSE_PRESSED, gfx::PointF(),
-                                       gfx::PointF(), base::TimeTicks(), 0, 0));
-
-  // Pressing Dismiss button should disable the ability to show onboarding UI
-  // again.
-  EXPECT_FALSE(fake_onboarding_ui_tracker()->ShouldShowOnboardingUi());
-}
-
-}  // namespace ash

ash/system/phonehub/phone_connected_view.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_PHONE_CONNECTED_VIEW_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ui/views/view.h"
 
 namespace chromeos {
@@ -20,7 +21,7 @@ class TrayBubbleView;
 
 // A view of the Phone Hub panel, displaying phone status and utility actions
 // such as phone status, task continuation, etc.
-class PhoneConnectedView : public views::View {
+class PhoneConnectedView : public PhoneHubContentView {
  public:
   PhoneConnectedView(TrayBubbleView* bubble_view,
                      chromeos::phonehub::PhoneHubManager* phone_hub_manager);

ash/system/phonehub/phone_hub_content_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_hub_content_view.h"
+
+namespace ash {
+
+PhoneHubContentView::PhoneHubContentView() = default;
+PhoneHubContentView::~PhoneHubContentView() = default;
+
+void PhoneHubContentView::OnBubbleClose() {
+  // Nothing to do.
+}
+
+}  // namespace ash

ash/system/phonehub/phone_hub_content_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_HUB_CONTENT_VIEW_H_
+#define ASH_SYSTEM_PHONEHUB_PHONE_HUB_CONTENT_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ui/views/view.h"
+
+namespace ash {
+
+// A base class for Phone Hub content views.
+class ASH_EXPORT PhoneHubContentView : public views::View {
+ public:
+  ~PhoneHubContentView() override;
+
+  // Called upon bubble closing, subclasses can install their own handlers here
+  // if needed for when the the bubble is dismissed.
+  virtual void OnBubbleClose();
+
+ protected:
+  PhoneHubContentView();
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_PHONE_HUB_CONTENT_VIEW_H_

ash/system/phonehub/phone_hub_interstitial_view.cc

@@ -68,6 +68,7 @@ void PhoneHubInterstitialView::SetImage(const gfx::ImageSkia& image) {
   // Expect a non-empty string for the title.
   DCHECK(!image.isNull());
   image_->SetImage(image);
+  image_->SetImageSize(gfx::Size(kImageWidthDip, kImageHeightDip));
 }
 
 void PhoneHubInterstitialView::SetTitle(const base::string16& title) {
@@ -119,7 +120,6 @@ void PhoneHubInterstitialView::InitLayout(bool show_progress) {
   // Set up layout row for the image view.
   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, kSecondColumnSetId);

ash/system/phonehub/phone_hub_interstitial_view.h

@@ -8,6 +8,7 @@
 #include <vector>
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ui/views/controls/progress_bar.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"
@@ -25,7 +26,7 @@ namespace ash {
 // A generic view to display interstitial pages for the Phone Hub feature with
 // image, text and buttons in a customized layout. It is reused by the
 // onboarding, loading, disconnected/reconnecting and error state UI.
-class ASH_EXPORT PhoneHubInterstitialView : public views::View {
+class ASH_EXPORT PhoneHubInterstitialView : public PhoneHubContentView {
  public:
   METADATA_HEADER(PhoneHubInterstitialView);
 

ash/system/phonehub/phone_hub_tray.cc

@@ -11,6 +11,7 @@
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ash/system/phonehub/phone_status_view.h"
 #include "ash/system/phonehub/quick_actions_view.h"
 #include "ash/system/phonehub/task_continuation_view.h"
@@ -109,7 +110,7 @@ void PhoneHubTray::OnPhoneHubUiStateChanged() {
   TrayBubbleView* bubble_view = bubble_->bubble_view();
 
   DCHECK(ui_controller_.get());
-  std::unique_ptr<views::View> content_view =
+  std::unique_ptr<PhoneHubContentView> content_view =
       ui_controller_->CreateContentView(bubble_view);
   if (!content_view.get()) {
     CloseBubble();
@@ -207,6 +208,8 @@ const char* PhoneHubTray::GetClassName() const {
 }
 
 void PhoneHubTray::CloseBubble() {
+  if (content_view_)
+    content_view_->OnBubbleClose();
   content_view_ = nullptr;
   bubble_.reset();
   SetIsActive(false);

ash/system/phonehub/phone_hub_tray.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_PHONE_HUB_TRAY_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ash/system/phonehub/phone_hub_ui_controller.h"
 #include "ash/system/tray/tray_background_view.h"
 #include "base/scoped_observer.h"
@@ -22,6 +23,7 @@ class ImageView;
 
 namespace ash {
 
+class PhoneHubContentView;
 class TrayBubbleWrapper;
 
 // This class represents the Phone Hub tray button in the status area and
@@ -53,6 +55,10 @@ class ASH_EXPORT PhoneHubTray : public TrayBackgroundView,
 
   views::View* content_view_for_testing() { return content_view_; }
 
+  PhoneHubUiController* ui_controller_for_testing() {
+    return ui_controller_.get();
+  }
+
  private:
   // TrayBubbleView::Delegate:
   base::string16 GetAccessibleNameForBubble() override;
@@ -78,7 +84,7 @@ class ASH_EXPORT PhoneHubTray : public TrayBackgroundView,
 
   // The main content view of the bubble, which changes depending on the state.
   // Unowned.
-  views::View* content_view_ = nullptr;
+  PhoneHubContentView* content_view_ = nullptr;
 
   ScopedObserver<PhoneHubUiController, PhoneHubUiController::Observer>
       observed_phone_hub_ui_controller_{this};

ash/system/phonehub/phone_hub_tray_unittest.cc

@@ -6,6 +6,7 @@
 
 #include "ash/public/cpp/test/test_new_window_delegate.h"
 #include "ash/system/phonehub/notification_opt_in_view.h"
+#include "ash/system/phonehub/phone_hub_ui_controller.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
 #include "ash/system/status_area_widget.h"
 #include "ash/system/status_area_widget_test_helper.h"
@@ -65,6 +66,10 @@ class PhoneHubTrayTest : public AshTestBase {
     return phone_hub_manager_.fake_connection_scheduler();
   }
 
+  chromeos::phonehub::FakeOnboardingUiTracker* GetOnboardingUiTracker() {
+    return phone_hub_manager_.fake_onboarding_ui_tracker();
+  }
+
   // Simulate a mouse click on the given view.
   // Waits for the event to be processed.
   void ClickOnAndWait(const views::View* view) {
@@ -107,6 +112,36 @@ class PhoneHubTrayTest : public AshTestBase {
             PhoneHubViewID::kDisconnectedLearnMoreButton));
   }
 
+  views::View* onboarding_main_view() {
+    return static_cast<views::View*>(
+        phone_hub_tray_->GetBubbleView()->GetViewByID(
+            PhoneHubViewID::kOnboardingMainView));
+  }
+
+  views::View* onboarding_dismiss_prompt_view() {
+    return static_cast<views::View*>(
+        phone_hub_tray_->GetBubbleView()->GetViewByID(
+            PhoneHubViewID::kOnboardingDismissPromptView));
+  }
+
+  views::Button* onboarding_get_started_button() {
+    return static_cast<views::Button*>(
+        phone_hub_tray_->GetBubbleView()->GetViewByID(
+            PhoneHubViewID::kOnboardingGetStartedButton));
+  }
+
+  views::Button* onboarding_dismiss_button() {
+    return static_cast<views::Button*>(
+        phone_hub_tray_->GetBubbleView()->GetViewByID(
+            PhoneHubViewID::kOnboardingDismissButton));
+  }
+
+  views::Button* onboarding_dismiss_ack_button() {
+    return static_cast<views::Button*>(
+        phone_hub_tray_->GetBubbleView()->GetViewByID(
+            PhoneHubViewID::kOnboardingDismissAckButton));
+  }
+
  protected:
   PhoneHubTray* phone_hub_tray_ = nullptr;
   chromeos::phonehub::FakePhoneHubManager phone_hub_manager_;
@@ -228,6 +263,84 @@ TEST_F(PhoneHubTrayTest, TransitionContentView) {
   EXPECT_EQ(PhoneHubViewID::kDisconnectedView, content_view()->GetID());
 }
 
+TEST_F(PhoneHubTrayTest, StartOnboardingFlow) {
+  // Simulate a pending setup state to show the onboarding screen.
+  GetFeatureStatusProvider()->SetStatus(
+      chromeos::phonehub::FeatureStatus::kEligiblePhoneButNotSetUp);
+  GetOnboardingUiTracker()->SetShouldShowOnboardingUi(true);
+
+  ClickTrayButton();
+  EXPECT_TRUE(phone_hub_tray_->is_active());
+  EXPECT_EQ(PhoneHubViewID::kOnboardingView, content_view()->GetID());
+  // It should display the onboarding main view.
+  EXPECT_TRUE(onboarding_main_view());
+  EXPECT_TRUE(onboarding_main_view()->GetVisible());
+  EXPECT_EQ(0u, GetOnboardingUiTracker()->handle_get_started_call_count());
+
+  // Simulate a click on the "Get started" button.
+  ClickOnAndWait(onboarding_get_started_button());
+  // It should invoke the |HandleGetStarted| call.
+  EXPECT_EQ(1u, GetOnboardingUiTracker()->handle_get_started_call_count());
+}
+
+TEST_F(PhoneHubTrayTest, DismissOnboardingFlowByClickingAckButton) {
+  // Simulate a pending setup state to show the onboarding screen.
+  GetFeatureStatusProvider()->SetStatus(
+      chromeos::phonehub::FeatureStatus::kEligiblePhoneButNotSetUp);
+  GetOnboardingUiTracker()->SetShouldShowOnboardingUi(true);
+
+  ClickTrayButton();
+  EXPECT_TRUE(phone_hub_tray_->is_active());
+  EXPECT_EQ(PhoneHubViewID::kOnboardingView, content_view()->GetID());
+  // It should display the onboarding main view at first.
+  EXPECT_TRUE(onboarding_main_view());
+
+  // Simulate a click on the "Dismiss" button.
+  ClickOnAndWait(onboarding_dismiss_button());
+
+  // It should transit to show the dismiss prompt.
+  EXPECT_TRUE(onboarding_dismiss_prompt_view());
+  EXPECT_TRUE(onboarding_dismiss_prompt_view()->GetVisible());
+
+  // Simulate a click on the "OK, got it" button to ack.
+  ClickOnAndWait(onboarding_dismiss_ack_button());
+
+  // Clicking "Ok, got it" button should dismiss the bubble, hide the tray icon,
+  // and disable the ability to show onboarding UI again.
+  EXPECT_FALSE(phone_hub_tray_->GetBubbleView());
+  EXPECT_FALSE(phone_hub_tray_->GetVisible());
+  EXPECT_FALSE(GetOnboardingUiTracker()->ShouldShowOnboardingUi());
+}
+
+TEST_F(PhoneHubTrayTest, DismissOnboardingFlowByClickingOutside) {
+  // Simulate a pending setup state to show the onboarding screen.
+  GetFeatureStatusProvider()->SetStatus(
+      chromeos::phonehub::FeatureStatus::kEligiblePhoneButNotSetUp);
+  GetOnboardingUiTracker()->SetShouldShowOnboardingUi(true);
+
+  ClickTrayButton();
+  EXPECT_TRUE(phone_hub_tray_->is_active());
+  EXPECT_EQ(PhoneHubViewID::kOnboardingView, content_view()->GetID());
+  // It should display the onboarding main view at first.
+  EXPECT_TRUE(onboarding_main_view());
+
+  // Simulate a click on the "Dismiss" button.
+  ClickOnAndWait(onboarding_dismiss_button());
+
+  // It should transit to show the dismiss prompt.
+  EXPECT_TRUE(onboarding_dismiss_prompt_view());
+  EXPECT_TRUE(onboarding_dismiss_prompt_view()->GetVisible());
+
+  // Simulate a click outside the bubble.
+  phone_hub_tray_->ClickedOutsideBubble();
+
+  // Clicking outside should dismiss the bubble, hide the tray icon, and disable
+  // the ability to show onboarding UI again.
+  EXPECT_FALSE(phone_hub_tray_->GetBubbleView());
+  EXPECT_FALSE(phone_hub_tray_->GetVisible());
+  EXPECT_FALSE(GetOnboardingUiTracker()->ShouldShowOnboardingUi());
+}
+
 TEST_F(PhoneHubTrayTest, ClickButtonsOnDisconnectedView) {
   // Simulates a phone disconnected error state to show the disconnected view.
   GetFeatureStatusProvider()->SetStatus(

ash/system/phonehub/phone_hub_ui_controller.cc

@@ -11,6 +11,7 @@
 #include "ash/system/phonehub/initial_connecting_view.h"
 #include "ash/system/phonehub/onboarding_view.h"
 #include "ash/system/phonehub/phone_connected_view.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ash/system/phonehub/phone_status_view.h"
 #include "base/logging.h"
 #include "chromeos/components/phonehub/phone_hub_manager.h"
@@ -38,7 +39,7 @@ void PhoneHubUiController::SetPhoneHubManager(
     phone_hub_manager_->GetOnboardingUiTracker()->AddObserver(this);
   }
 
-  UpdateUiState();
+  UpdateUiState(GetUiStateFromPhoneHubManager());
 }
 
 std::unique_ptr<views::View> PhoneHubUiController::CreateStatusHeaderView() {
@@ -47,7 +48,7 @@ std::unique_ptr<views::View> PhoneHubUiController::CreateStatusHeaderView() {
   return std::make_unique<PhoneStatusView>(phone_hub_manager_->GetPhoneModel());
 }
 
-std::unique_ptr<views::View> PhoneHubUiController::CreateContentView(
+std::unique_ptr<PhoneHubContentView> PhoneHubUiController::CreateContentView(
     TrayBubbleView* bubble_view) {
   switch (ui_state_) {
     case UiState::kHidden:
@@ -55,7 +56,7 @@ std::unique_ptr<views::View> PhoneHubUiController::CreateContentView(
     case UiState::kOnboardingWithoutPhone:
     case UiState::kOnboardingWithPhone:
       return std::make_unique<OnboardingView>(
-          phone_hub_manager_->GetOnboardingUiTracker());
+          phone_hub_manager_->GetOnboardingUiTracker(), bubble_view);
     case UiState::kBluetoothDisabled:
       return std::make_unique<BluetoothDisabledView>();
     case UiState::kInitialConnecting:
@@ -83,15 +84,15 @@ void PhoneHubUiController::RemoveObserver(Observer* observer) {
 }
 
 void PhoneHubUiController::OnFeatureStatusChanged() {
-  UpdateUiState();
+  UpdateUiState(GetUiStateFromPhoneHubManager());
 }
 
 void PhoneHubUiController::OnShouldShowOnboardingUiChanged() {
-  UpdateUiState();
+  UpdateUiState(GetUiStateFromPhoneHubManager());
 }
 
-void PhoneHubUiController::UpdateUiState() {
-  auto new_state = GetUiStateFromPhoneHubManager();
+void PhoneHubUiController::UpdateUiState(
+    PhoneHubUiController::UiState new_state) {
   if (new_state == ui_state_)
     return;
 

ash/system/phonehub/phone_hub_ui_controller.h

@@ -6,6 +6,7 @@
 #define ASH_SYSTEM_PHONEHUB_PHONE_HUB_UI_CONTROLLER_H_
 
 #include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_content_view.h"
 #include "base/observer_list.h"
 #include "base/observer_list_types.h"
 #include "chromeos/components/phonehub/feature_status_provider.h"
@@ -62,7 +63,8 @@ class ASH_EXPORT PhoneHubUiController
 
   // Creates the corresponding content view for the current UI state.
   // |bubble_view| will be the parent the created content view.
-  std::unique_ptr<views::View> CreateContentView(TrayBubbleView* bubble_view);
+  std::unique_ptr<PhoneHubContentView> CreateContentView(
+      TrayBubbleView* bubble_view);
 
   // Creates the header view displaying the phone status.
   std::unique_ptr<views::View> CreateStatusHeaderView();
@@ -81,7 +83,7 @@ class ASH_EXPORT PhoneHubUiController
   void OnShouldShowOnboardingUiChanged() override;
 
   // Updates the current UI state and notifies observers.
-  void UpdateUiState();
+  void UpdateUiState(PhoneHubUiController::UiState new_state);
 
   // Returns the UiState from the PhoneHubManager.
   UiState GetUiStateFromPhoneHubManager();

ash/system/phonehub/phone_hub_view_ids.h

@@ -20,8 +20,11 @@ enum PhoneHubViewID {
 
   // Onboarding view and its components.
   kOnboardingView,
+  kOnboardingMainView,
   kOnboardingGetStartedButton,
   kOnboardingDismissButton,
+  kOnboardingDismissPromptView,
+  kOnboardingDismissAckButton,
 
   // Connection error view and its components.
   kDisconnectedView,