[CrOS PhoneHub] Make buttons focusable on edge case UIs.

Previously on edge case screens, we use |LabelButton|, which is
unfocusable by default, for buttons without background. But these
buttons need to be focusable during tab traversal and accessibility
mode.

This CL introduces |InterstitialViewButton| as a subclass of
|RoundedLabelButton|. It handles both types of buttons (with and
without background), and it's focusable with a rounded rectangle focus
ring and shares common setup of the system menu buttons.

Screenshot when the button is on focus:
https://screenshot.googleplex.com/AKv42vcGDSsTYGV.png

BUG=1106937,1126208

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

ash/BUILD.gn

@@ -1139,6 +1139,8 @@ component("ash") {
     "system/phonehub/enable_hotspot_quick_action_controller.h",
     "system/phonehub/initial_connecting_view.cc",
     "system/phonehub/initial_connecting_view.h",
+    "system/phonehub/interstitial_view_button.cc",
+    "system/phonehub/interstitial_view_button.h",
     "system/phonehub/locate_phone_quick_action_controller.cc",
     "system/phonehub/locate_phone_quick_action_controller.h",
     "system/phonehub/notification_opt_in_view.cc",

ash/system/phonehub/bluetooth_disabled_view.cc

@@ -7,9 +7,9 @@
 #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/interstitial_view_button.h"
 #include "ash/system/phonehub/phone_hub_interstitial_view.h"
 #include "ash/system/phonehub/phone_hub_view_ids.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"
@@ -43,18 +43,22 @@ BluetoothDisabledView::BluetoothDisabledView() {
       IDS_ASH_PHONE_HUB_BLUETOOTH_DISABLED_DIALOG_DESCRIPTION));
 
   // Add "Learn more" and "Ok, got it" buttons.
-  auto learn_more = std::make_unique<views::LabelButton>(
-      this, l10n_util::GetStringUTF16(
-                IDS_ASH_PHONE_HUB_BLUETOOTH_DISABLED_DIALOG_LEARN_MORE_BUTTON));
+  auto learn_more = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_BLUETOOTH_DISABLED_DIALOG_LEARN_MORE_BUTTON),
+      /*paint_background=*/false);
   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_BLUETOOTH_DISABLED_DIALOG_OK_BUTTON));
+  auto refresh = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_BLUETOOTH_DISABLED_DIALOG_OK_BUTTON),
+      /*paint_background=*/true);
   refresh->set_tag(kOkButtonTag);
   content_view_->AddButton(std::move(refresh));
 }

ash/system/phonehub/connection_error_view.cc

@@ -10,9 +10,9 @@
 #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/interstitial_view_button.h"
 #include "ash/system/phonehub/phone_hub_interstitial_view.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
-#include "ash/system/unified/rounded_label_button.h"
 #include "chromeos/components/phonehub/connection_scheduler.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
@@ -58,18 +58,22 @@ ConnectionErrorView::ConnectionErrorView(
     return;
 
   // Add "Learn more" and "Refresh" buttons only for disconnected state.
-  auto learn_more = std::make_unique<views::LabelButton>(
-      this, l10n_util::GetStringUTF16(
-                IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_LEARN_MORE_BUTTON));
+  auto learn_more = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_LEARN_MORE_BUTTON),
+      /*paint_background=*/false);
   learn_more->SetEnabledTextColors(
       AshColorProvider::Get()->GetContentLayerColor(
           AshColorProvider::ContentLayerType::kTextColorPrimary));
   learn_more->SetID(PhoneHubViewID::kDisconnectedLearnMoreButton);
   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));
+  auto refresh = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_CONNECTION_ERROR_DIALOG_REFRESH_BUTTON),
+      /*paint_background=*/true);
   refresh->SetID(PhoneHubViewID::kDisconnectedRefreshButton);
   content_view_->AddButton(std::move(refresh));
 }

ash/system/phonehub/interstitial_view_button.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/interstitial_view_button.h"
+
+#include "ash/system/unified/rounded_label_button.h"
+#include "ui/views/controls/button/label_button.h"
+
+namespace ash {
+
+InterstitialViewButton::InterstitialViewButton(views::ButtonListener* listener,
+                                               const base::string16& text,
+                                               bool paint_background)
+    : RoundedLabelButton(listener, text), paint_background_(paint_background) {}
+
+InterstitialViewButton::~InterstitialViewButton() = default;
+
+void InterstitialViewButton::PaintButtonContents(gfx::Canvas* canvas) {
+  if (!paint_background_) {
+    views::LabelButton::PaintButtonContents(canvas);
+    return;
+  }
+
+  RoundedLabelButton::PaintButtonContents(canvas);
+}
+
+BEGIN_METADATA(InterstitialViewButton, RoundedLabelButton)
+END_METADATA
+
+}  // namespace ash

ash/system/phonehub/interstitial_view_button.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_INTERSTITIAL_VIEW_BUTTON_H_
+#define ASH_SYSTEM_PHONEHUB_INTERSTITIAL_VIEW_BUTTON_H_
+
+#include "ash/ash_export.h"
+#include "ash/system/unified/rounded_label_button.h"
+
+namespace views {
+class ButtonListener;
+}  // namespace views
+
+namespace ash {
+
+// Button to be shown on Phone Hub interstital views. It's focusable by default
+// and shares common setup with system menu buttons. It can have a gray rounded
+// rectangle background if |paint_background| is true.
+class ASH_EXPORT InterstitialViewButton : public RoundedLabelButton {
+ public:
+  METADATA_HEADER(InterstitialViewButton);
+
+  InterstitialViewButton(views::ButtonListener* listener,
+                         const base::string16& text,
+                         bool paint_background);
+  InterstitialViewButton(const InterstitialViewButton&) = delete;
+  InterstitialViewButton& operator=(const InterstitialViewButton&) = delete;
+  ~InterstitialViewButton() override;
+
+  // views::RoundedLabelButton:
+  void PaintButtonContents(gfx::Canvas* canvas) override;
+
+ private:
+  // True if the button needs a gray rectangle background.
+  bool paint_background_ = false;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SYSTEM_PHONEHUB_INTERSTITIAL_VIEW_BUTTON_H_

ash/system/phonehub/onboarding_view.cc

@@ -14,6 +14,7 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/model/system_tray_model.h"
+#include "ash/system/phonehub/interstitial_view_button.h"
 #include "ash/system/phonehub/phone_hub_interstitial_view.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
 #include "ash/system/unified/rounded_label_button.h"
@@ -47,17 +48,21 @@ OnboardingView::OnboardingView(
       IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_DESCRIPTION));
 
   // Add "Dismiss" and "Get started" buttons.
-  auto dismiss = std::make_unique<views::LabelButton>(
-      this, l10n_util::GetStringUTF16(
-                IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_DISMISS_BUTTON));
+  auto dismiss = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_DISMISS_BUTTON),
+      /*paint_background=*/false);
   dismiss->SetEnabledTextColors(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
   dismiss->SetID(PhoneHubViewID::kOnboardingDismissButton);
   content_view_->AddButton(std::move(dismiss));
 
-  auto get_started = std::make_unique<RoundedLabelButton>(
-      this, l10n_util::GetStringUTF16(
-                IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_GET_STARTED_BUTTON));
+  auto get_started = std::make_unique<InterstitialViewButton>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_ASH_PHONE_HUB_ONBOARDING_DIALOG_GET_STARTED_BUTTON),
+      /*paint_background=*/true);
   get_started->SetID(PhoneHubViewID::kOnboardingGetStartedButton);
   content_view_->AddButton(std::move(get_started));
 }