[CrOS PhoneHub] Add connection error UI.

This CL adds the connection error UI that pops up when the Phone Hub
feature is not available due to connection issues. Remaining work
includes implementing the button click handler.

Demo: https://screenshot.googleplex.com/6VSGgicU284Z4Ts.png

Misc: updates the comment for |PhoneHubInterstitalView|.

BUG=1106937,1126208

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

ash/BUILD.gn

@@ -1099,6 +1099,8 @@ component("ash") {
     "system/palette/tools/magnifier_mode.h",
     "system/palette/tools/metalayer_mode.cc",
     "system/palette/tools/metalayer_mode.h",
+    "system/phonehub/connection_error_view.cc",
+    "system/phonehub/connection_error_view.h",
     "system/phonehub/continue_browsing_chip.cc",
     "system/phonehub/continue_browsing_chip.h",
     "system/phonehub/initial_connecting_view.cc",

ash/ash_strings.grd

@@ -1008,6 +1008,18 @@ This file contains the strings for ash.
       <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_PHONE_HUB_CONNECTION_ERROR_DIALOG_TITLE" desc="The title of the dialog that pops up when the Phone Hub feature is not available because there is currently no active connection to the phone.">
+        Uh Oh! Can’t find phone
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_DESCRIPTION" desc="The description of the dialog that pops up when the Phone Hub feature is not available because there is currently no active connection to the phone.">
+        Looks like your phone is not online and we are not able to get all the goodies from it for you now.
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_REFRESH_BUTTON" desc="Refresh button on the connection error dialog to retry the connection attempt to the phone.">
+        Refresh
+      </message>
+      <message name="IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_LEARN_MORE_BUTTON" desc="Learn more button on the connection error dialog to show more related information.">
+        Learn more
+      </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_CONNECTION_ERROR_DIALOG_DESCRIPTION.png.sha1

+41c34a5188e7dcdcb8d01415aaa4dc366894f89e
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_LEARN_MORE_BUTTON.png.sha1

+02c537517d6c83975b3c16fd0932f1223b3d4e4b
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_REFRESH_BUTTON.png.sha1

+72a433bcf3a6ceb671145de6ef54317295f5af0b
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_TITLE.png.sha1

+ffba8f7a47fc10ca5efd170bb91decc594bff24f
\ No newline at end of file

ash/public/cpp/resources/ash_public_unscaled_resources.grd

@@ -21,6 +21,7 @@
       <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" />
+      <include name="IDR_PHONE_HUB_ERROR_STATE_IMAGE" file="unscaled_resources/phone_hub_error_state_image.png" type="BINDATA" />
     </includes>
   </release>
 </grit>

ash/system/phonehub/connection_error_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/connection_error_view.h"
+
+#include <memory>
+
+#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 "ash/system/unified/rounded_label_button.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/base/resource/resource_bundle.h"
+#include "ui/views/layout/fill_layout.h"
+
+namespace ash {
+
+namespace {
+
+// Tag value used to uniquely identify the "Learn More" and "Refresh" buttons.
+constexpr int kLearnMoreButtonTag = 1;
+constexpr int kRefreshButtonTag = 2;
+
+}  // namespace
+
+ConnectionErrorView::ConnectionErrorView(ErrorStatus error) {
+  SetLayoutManager(std::make_unique<views::FillLayout>());
+  content_view_ = AddChildView(std::make_unique<PhoneHubInterstitialView>(
+      /*show_progress=*/error == ErrorStatus::kReconnecting));
+
+  // TODO(crbug.com/1127996): Replace PNG file with vector icon.
+  const int image_id = (error == ErrorStatus::kDisconnected)
+                           ? IDR_PHONE_HUB_ERROR_STATE_IMAGE
+                           : IDR_PHONE_HUB_CONNECTING_IMAGE;
+  gfx::ImageSkia* image =
+      ui::ResourceBundle::GetSharedInstance().GetImageSkiaNamed(image_id);
+  content_view_->SetImage(*image);
+
+  const int title = (error == ErrorStatus::kDisconnected)
+                        ? IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_TITLE
+                        : IDS_ASH_PHONE_HUB_INITIAL_CONNECTING_DIALOG_TITLE;
+  content_view_->SetTitle(l10n_util::GetStringUTF16(title));
+  content_view_->SetDescription(l10n_util::GetStringUTF16(
+      IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_DESCRIPTION));
+
+  // Add "Learn more" and "Refresh" buttons.
+  auto learn_more = std::make_unique<views::LabelButton>(
+      this, l10n_util::GetStringUTF16(
+                IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_LEARN_MORE_BUTTON));
+  learn_more->SetEnabledTextColors(
+      AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kTextColorPrimary));
+  learn_more->set_tag(kLearnMoreButtonTag);
+  content_view_->AddButton(std::move(learn_more));
+
+  auto refresh = std::make_unique<RoundedLabelButton>(
+      this, l10n_util::GetStringUTF16(
+                IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_REFRESH_BUTTON));
+  refresh->set_tag(kRefreshButtonTag);
+  content_view_->AddButton(std::move(refresh));
+}
+
+ConnectionErrorView::~ConnectionErrorView() = default;
+
+void ConnectionErrorView::ButtonPressed(views::Button* sender,
+                                        const ui::Event& event) {
+  // TODO(meilinw): implement button pressed actions.
+}
+
+BEGIN_METADATA(ConnectionErrorView, views::View)
+END_METADATA
+
+}  // namespace ash

ash/system/phonehub/connection_error_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_CONNECTION_ERROR_VIEW_H_
+#define ASH_SYSTEM_PHONEHUB_CONNECTION_ERROR_VIEW_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/phonehub/phone_hub_interstitial_view.h"
+#include "ui/views/controls/button/button.h"
+
+namespace ash {
+
+class PhoneHubInterstitialView;
+
+// Defines possible connection error states of the Phone Hub feature.
+enum class ErrorStatus {
+  kDisconnected,  // The connection to the phone has been interrupted.
+  kReconnecting,  // Attempts to resume the connection to the phone.
+};
+
+// An interstitial view represeting that the Phone Hub feature is not available
+// due to connection issues.
+class ASH_EXPORT ConnectionErrorView : public views::View,
+                                       public views::ButtonListener {
+ public:
+  METADATA_HEADER(ConnectionErrorView);
+
+  explicit ConnectionErrorView(ErrorStatus error);
+  ConnectionErrorView(const ConnectionErrorView&) = delete;
+  ConnectionErrorView& operator=(const ConnectionErrorView&) = delete;
+  ~ConnectionErrorView() override;
+
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
+ private:
+  PhoneHubInterstitialView* content_view_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_CONNECTION_ERROR_VIEW_H_

ash/system/phonehub/phone_hub_interstitial_view.h

@@ -22,8 +22,9 @@ class ProgressBar;
 
 namespace ash {
 
-// A interstitial view for Phone Hub with a customized layout that can be shared
-// by the initial onboarding, connecting/disconnecting and error state UI.
+// 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 {
  public:
   METADATA_HEADER(PhoneHubInterstitialView);