ash: Add LoginPalette for LoginPasswordView and LoginPinView

This enables reusing LoginPasswordView and LoginPinView with
custom colors, e.g. for in-session auth dialog and dark mode
in the future.

Bug: b:156258540
Test: deploy to Nami device, looks the same as without the change.
Change-Id: Ic7ec4be3327fa4a94571543d41ba5030807389b1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2333823Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Yicheng Li <yichengli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796470}

ash/BUILD.gn

@@ -555,6 +555,8 @@ component("ash") {
     "login/ui/login_expanded_public_account_view.h",
     "login/ui/login_menu_view.cc",
     "login/ui/login_menu_view.h",
+    "login/ui/login_palette.cc",
+    "login/ui/login_palette.h",
     "login/ui/login_password_view.cc",
     "login/ui/login_password_view.h",
     "login/ui/login_pin_view.cc",

ash/login/ui/login_auth_user_view.cc

@@ -827,7 +827,9 @@ LoginAuthUserView::LoginAuthUserView(const LoginUserInfo& user,
       callbacks.on_remove_warning_shown, callbacks.on_remove);
   user_view_ = user_view.get();
 
-  auto password_view = std::make_unique<LoginPasswordView>();
+  const LoginPalette palette = CreateDefaultLoginPalette();
+
+  auto password_view = std::make_unique<LoginPasswordView>(palette);
   password_view_ = password_view.get();
   password_view->SetPaintToLayer();  // Needed for opacity animation.
   password_view->layer()->SetFillsBoundsOpaquely(false);
@@ -835,7 +837,7 @@ LoginAuthUserView::LoginAuthUserView(const LoginUserInfo& user,
       user.show_display_password_button);
 
   auto pin_view = std::make_unique<LoginPinView>(
-      LoginPinView::Style::kAlphanumeric,
+      LoginPinView::Style::kAlphanumeric, palette,
       base::BindRepeating(&LoginPasswordView::InsertNumber,
                           base::Unretained(password_view.get())),
       base::BindRepeating(&LoginPasswordView::Backspace,

ash/login/ui/login_palette.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/login/ui/login_palette.h"
+#include "ash/public/cpp/login_constants.h"
+#include "ui/gfx/color_palette.h"
+
+namespace ash {
+
+LoginPalette CreateDefaultLoginPalette() {
+  return LoginPalette(
+      {.password_text_color = SK_ColorWHITE,
+       .password_placeholder_text_color =
+           login_constants::kAuthMethodsTextColor,
+       .password_background_color = SK_ColorTRANSPARENT,
+       .button_enabled_color = login_constants::kButtonEnabledColor,
+       .pin_ink_drop_highlight_color = SkColorSetA(SK_ColorWHITE, 0x0A),
+       .pin_ink_drop_ripple_color = SkColorSetA(SK_ColorWHITE, 0x0F),
+       .pin_backspace_icon_color = gfx::kGoogleGrey200});
+}
+
+}  // namespace ash

ash/login/ui/login_palette.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_LOGIN_UI_LOGIN_PALETTE_H_
+#define ASH_LOGIN_UI_LOGIN_PALETTE_H_
+
+#include "ash/ash_export.h"
+#include "third_party/skia/include/core/SkColor.h"
+
+namespace ash {
+
+// LoginPalette provides color values to LoginPasswordView and LoginPinView,
+// so that these views can be adapted for different scenarios, e.g. the
+// LoginPasswordView for in-session auth dialog will have different colors from
+// the LoginPasswordView for lock screen.
+struct LoginPalette {
+  SkColor password_text_color;
+  SkColor password_placeholder_text_color;
+  SkColor password_background_color;
+  SkColor button_enabled_color;
+  SkColor pin_ink_drop_highlight_color;
+  SkColor pin_ink_drop_ripple_color;
+  SkColor pin_backspace_icon_color;
+};
+
+ASH_EXPORT LoginPalette CreateDefaultLoginPalette();
+
+}  // namespace ash
+
+#endif  // ASH_LOGIN_UI_LOGIN_PALETTE_H_

ash/login/ui/login_password_view.cc

@@ -190,20 +190,21 @@ IconBundle GetEasyUnlockResources(EasyUnlockIconId id) {
 // show/hide password modes.
 class LoginPasswordView::LoginTextfield : public views::Textfield {
  public:
-  LoginTextfield(base::RepeatingClosure on_focus_closure,
+  LoginTextfield(const LoginPalette& palette,
+                 base::RepeatingClosure on_focus_closure,
                  base::RepeatingClosure on_blur_closure)
       : on_focus_closure_(std::move(on_focus_closure)),
         on_blur_closure_(std::move(on_blur_closure)) {
-    SetTextColor(SK_ColorWHITE);
+    SetTextColor(palette.password_text_color);
     SetFontList(views::Textfield::GetDefaultFontList().Derive(
         kPasswordFontDeltaSize, gfx::Font::FontStyle::NORMAL,
         gfx::Font::Weight::NORMAL));
     SetTextInputType(ui::TEXT_INPUT_TYPE_PASSWORD);
     set_placeholder_font_list(views::Textfield::GetDefaultFontList());
-    set_placeholder_text_color(login_constants::kAuthMethodsTextColor);
+    set_placeholder_text_color(palette.password_placeholder_text_color);
     SetObscuredGlyphSpacing(kPasswordGlyphSpacing);
     SetBorder(nullptr);
-    SetBackgroundColor(SK_ColorTRANSPARENT);
+    SetBackgroundColor(palette.password_background_color);
   }
   LoginTextfield(const LoginTextfield&) = delete;
   LoginTextfield& operator=(const LoginTextfield&) = delete;
@@ -386,17 +387,18 @@ class LoginPasswordView::EasyUnlockIcon : public views::Button,
 class LoginPasswordView::DisplayPasswordButton
     : public views::ToggleImageButton {
  public:
-  explicit DisplayPasswordButton(views::ButtonListener* listener)
+  DisplayPasswordButton(const LoginPalette& palette,
+                        views::ButtonListener* listener)
       : ToggleImageButton(listener) {
     const gfx::ImageSkia invisible_icon = gfx::CreateVectorIcon(
         kLockScreenPasswordInvisibleIcon, kDisplayPasswordButtonSizeDp,
-        login_constants::kButtonEnabledColor);
+        palette.button_enabled_color);
     const gfx::ImageSkia visible_icon = gfx::CreateVectorIcon(
         kLockScreenPasswordVisibleIcon, kDisplayPasswordButtonSizeDp,
-        login_constants::kButtonEnabledColor);
+        palette.button_enabled_color);
     const gfx::ImageSkia visible_icon_disabled = gfx::CreateVectorIcon(
         kLockScreenPasswordVisibleIcon, kDisplayPasswordButtonSizeDp,
-        SkColorSetA(login_constants::kButtonEnabledColor,
+        SkColorSetA(palette.button_enabled_color,
                     login_constants::kButtonDisabledAlpha));
     SetImage(views::Button::STATE_NORMAL, visible_icon);
     SetImage(views::Button::STATE_DISABLED, visible_icon_disabled);
@@ -467,11 +469,12 @@ void LoginPasswordView::TestApi::SetTimers(
   view_->SetDisplayPasswordButtonVisible(true);
 }
 
-LoginPasswordView::LoginPasswordView()
+LoginPasswordView::LoginPasswordView(const LoginPalette& palette)
     : is_display_password_feature_enabled_(
           chromeos::features::IsLoginDisplayPasswordButtonEnabled()),
       clear_password_timer_(std::make_unique<base::RetainingOneShotTimer>()),
-      hide_password_timer_(std::make_unique<base::RetainingOneShotTimer>()) {
+      hide_password_timer_(std::make_unique<base::RetainingOneShotTimer>()),
+      palette_(palette) {
   Shell::Get()->ime_controller()->AddObserver(this);
 
   // Contains the password layout on the left and the submit button on the
@@ -520,6 +523,7 @@ LoginPasswordView::LoginPasswordView()
   // Password textfield. We control the textfield size by sizing the parent
   // view, as the textfield will expand to fill it.
   auto textfield = std::make_unique<LoginTextfield>(
+      palette_,
       // Highlight on focus. Remove highlight on blur.
       base::BindRepeating(
           &LoginPasswordView::SetSeparatorAndCapsLockHighlighted,
@@ -541,7 +545,7 @@ LoginPasswordView::LoginPasswordView()
 
   if (is_display_password_feature_enabled_) {
     display_password_button_ = password_row_->AddChildView(
-        std::make_unique<DisplayPasswordButton>(this));
+        std::make_unique<DisplayPasswordButton>(palette_, this));
   }
 
   // Separator on bottom.
@@ -800,7 +804,7 @@ void LoginPasswordView::SubmitPassword() {
 }
 
 void LoginPasswordView::SetSeparatorAndCapsLockHighlighted(bool highlight) {
-  SkColor color = login_constants::kButtonEnabledColor;
+  SkColor color = palette_.button_enabled_color;
   if (!highlight)
     color = SkColorSetA(color, login_constants::kButtonDisabledAlpha);
   separator_->SetColor(color);

ash/login/ui/login_password_view.h

@@ -8,6 +8,7 @@
 #include "ash/ash_export.h"
 #include "ash/ime/ime_controller_impl.h"
 #include "ash/login/ui/animated_rounded_image_view.h"
+#include "ash/login/ui/login_palette.h"
 #include "ash/public/cpp/session/user_info.h"
 #include "base/scoped_observer.h"
 #include "base/strings/string16.h"
@@ -85,7 +86,7 @@ class ASH_EXPORT LoginPasswordView : public views::View,
   using OnEasyUnlockIconTapped = base::RepeatingClosure;
 
   // Must call |Init| after construction.
-  LoginPasswordView();
+  explicit LoginPasswordView(const LoginPalette& palette);
   ~LoginPasswordView() override;
 
   // |on_submit| is called when the user hits enter (or pressed the submit arrow
@@ -205,6 +206,8 @@ class ASH_EXPORT LoginPasswordView : public views::View,
   // through the password and make the characters read out loud one by one).
   std::unique_ptr<base::RetainingOneShotTimer> hide_password_timer_;
 
+  LoginPalette palette_;
+
   views::View* password_row_ = nullptr;
 
   LoginTextfield* textfield_ = nullptr;

ash/login/ui/login_password_view_test.cc

@@ -4,6 +4,7 @@
 
 #include "ash/login/ui/login_password_view.h"
 
+#include "ash/login/ui/login_palette.h"
 #include "ash/login/ui/login_test_base.h"
 #include "ash/public/cpp/login_types.h"
 #include "ash/shell.h"
@@ -31,7 +32,7 @@ class LoginPasswordViewTest : public LoginTestBase {
   void SetUp() override {
     LoginTestBase::SetUp();
 
-    view_ = new LoginPasswordView();
+    view_ = new LoginPasswordView(CreateDefaultLoginPalette());
     view_->Init(
         base::BindRepeating(&LoginPasswordViewTest::OnPasswordSubmit,
                             base::Unretained(this)),

ash/login/ui/login_pin_view.cc

@@ -22,7 +22,6 @@
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/events/keycodes/dom/dom_code.h"
-#include "ui/gfx/color_palette.h"
 #include "ui/gfx/geometry/size.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/animation/flood_fill_ink_drop_ripple.h"
@@ -38,8 +37,6 @@ namespace ash {
 namespace {
 
 // Values for the ink drop.
-constexpr SkColor kInkDropHighlightColor = SkColorSetA(SK_ColorWHITE, 0x0A);
-constexpr SkColor kInkDropRippleColor = SkColorSetA(SK_ColorWHITE, 0x0F);
 constexpr int kInkDropCornerRadiusDp = 24;
 
 constexpr const char* kPinLabels[] = {
@@ -57,7 +54,6 @@ constexpr const char* kPinLabels[] = {
 
 constexpr const char kLoginPinViewClassName[] = "LoginPinView";
 
-constexpr SkColor kBackspaceIconColor = gfx::kGoogleGrey200;
 // How long does the user have to long-press the backspace button before it
 // auto-submits?
 constexpr int kInitialBackspaceDelayMs = 500;
@@ -89,10 +85,13 @@ int GetViewIdForPinNumber(int number) {
 // A base class for pin button in the pin keyboard.
 class BasePinButton : public views::InkDropHostView {
  public:
-  explicit BasePinButton(const gfx::Size& size,
-                         const base::string16& accessible_name,
-                         const base::RepeatingClosure& on_press)
-      : on_press_(on_press), accessible_name_(accessible_name) {
+  BasePinButton(const LoginPalette& palette,
+                const gfx::Size& size,
+                const base::string16& accessible_name,
+                const base::RepeatingClosure& on_press)
+      : on_press_(on_press),
+        palette_(palette),
+        accessible_name_(accessible_name) {
     SetFocusBehavior(FocusBehavior::ACCESSIBLE_ONLY);
     SetPreferredSize(size);
 
@@ -153,13 +152,13 @@ class BasePinButton : public views::InkDropHostView {
 
     return std::make_unique<views::FloodFillInkDropRipple>(
         size(), GetLocalBounds().InsetsFrom(bounds),
-        GetInkDropCenterBasedOnLastEvent(), kInkDropRippleColor,
+        GetInkDropCenterBasedOnLastEvent(), palette_.pin_ink_drop_ripple_color,
         /*visible_opacity=*/1.f);
   }
   std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
       const override {
     auto highlight = std::make_unique<views::InkDropHighlight>(
-        gfx::SizeF(size()), kInkDropHighlightColor);
+        gfx::SizeF(size()), palette_.pin_ink_drop_highlight_color);
     highlight->set_visible_opacity(1.f);
     return highlight;
   }
@@ -182,6 +181,8 @@ class BasePinButton : public views::InkDropHostView {
   // Handler for press events. May be null.
   base::RepeatingClosure on_press_;
 
+  LoginPalette palette_;
+
  private:
   const base::string16 accessible_name_;
 
@@ -193,9 +194,11 @@ class DigitPinButton : public BasePinButton {
  public:
   DigitPinButton(int value,
                  bool show_sub_label,
+                 const LoginPalette& palette,
                  const gfx::Size& size,
                  const LoginPinView::OnPinKey& on_key)
-      : BasePinButton(size,
+      : BasePinButton(palette,
+                      size,
                       GetButtonLabelForNumber(value),
                       base::BindRepeating(on_key, value)) {
     SetID(GetViewIdForPinNumber(value));
@@ -203,7 +206,7 @@ class DigitPinButton : public BasePinButton {
     views::Label* label = new views::Label(GetButtonLabelForNumber(value),
                                            views::style::CONTEXT_BUTTON,
                                            views::style::STYLE_PRIMARY);
-    label->SetEnabledColor(login_constants::kButtonEnabledColor);
+    label->SetEnabledColor(palette.button_enabled_color);
     label->SetAutoColorReadabilityEnabled(false);
     label->SetSubpixelRenderingEnabled(false);
     label->SetFontList(base_font_list.Derive(8, gfx::Font::FontStyle::NORMAL,
@@ -214,9 +217,8 @@ class DigitPinButton : public BasePinButton {
       views::Label* sub_label = new views::Label(
           GetButtonSubLabelForNumber(value), views::style::CONTEXT_BUTTON,
           views::style::STYLE_PRIMARY);
-      sub_label->SetEnabledColor(
-          SkColorSetA(login_constants::kButtonEnabledColor,
-                      login_constants::kButtonDisabledAlpha));
+      sub_label->SetEnabledColor(SkColorSetA(
+          palette.button_enabled_color, login_constants::kButtonDisabledAlpha));
       sub_label->SetAutoColorReadabilityEnabled(false);
       sub_label->SetSubpixelRenderingEnabled(false);
       sub_label->SetFontList(base_font_list.Derive(
@@ -236,15 +238,18 @@ class DigitPinButton : public BasePinButton {
 // A PIN button that displays backspace icon.
 class LoginPinView::BackspacePinButton : public BasePinButton {
  public:
-  BackspacePinButton(const gfx::Size& size,
+  BackspacePinButton(const LoginPalette& palette,
+                     const gfx::Size& size,
                      const base::RepeatingClosure& on_press)
-      : BasePinButton(size,
+      : BasePinButton(palette,
+                      size,
                       l10n_util::GetStringUTF16(
                           IDS_ASH_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME),
-                      on_press) {
+                      on_press),
+        palette_(palette) {
     image_ = new views::ImageView();
-    image_->SetImage(
-        gfx::CreateVectorIcon(kLockScreenBackspaceIcon, kBackspaceIconColor));
+    image_->SetImage(gfx::CreateVectorIcon(kLockScreenBackspaceIcon,
+                                           palette_.pin_backspace_icon_color));
     AddChildView(image_);
     SetEnabled(false);
   }
@@ -258,7 +263,7 @@ class LoginPinView::BackspacePinButton : public BasePinButton {
   }
 
   void OnEnabledChanged() {
-    SkColor color = kBackspaceIconColor;
+    SkColor color = palette_.pin_backspace_icon_color;
     if (!GetEnabled()) {
       AnimateInkDrop(views::InkDropState::DEACTIVATED, nullptr);
       color = SkColorSetA(color, login_constants::kButtonDisabledAlpha);
@@ -356,20 +361,26 @@ class LoginPinView::BackspacePinButton : public BasePinButton {
           &LoginPinView::BackspacePinButton::OnEnabledChanged,
           base::Unretained(this)));
 
+  LoginPalette palette_;
+
   DISALLOW_COPY_AND_ASSIGN(BackspacePinButton);
 };
 
 // A PIN button to press to submit the PIN / password.
 class LoginPinView::SubmitPinButton : public BasePinButton {
  public:
-  SubmitPinButton(const gfx::Size& size, const base::RepeatingClosure& on_press)
-      : BasePinButton(size,
+  SubmitPinButton(const LoginPalette& palette,
+                  const gfx::Size& size,
+                  const base::RepeatingClosure& on_press)
+      : BasePinButton(palette,
+                      size,
                       l10n_util::GetStringUTF16(
                           IDS_ASH_LOGIN_SUBMIT_BUTTON_ACCESSIBLE_NAME),
                       on_press),
-        image_(new views::ImageView()) {
-    image_->SetImage(gfx::CreateVectorIcon(
-        kLockScreenArrowIcon, login_constants::kButtonEnabledColor));
+        image_(new views::ImageView()),
+        palette_(palette) {
+    image_->SetImage(gfx::CreateVectorIcon(kLockScreenArrowIcon,
+                                           palette_.button_enabled_color));
     AddChildView(image_);
     SetEnabled(false);
   }
@@ -379,7 +390,7 @@ class LoginPinView::SubmitPinButton : public BasePinButton {
   ~SubmitPinButton() override = default;
 
   void OnEnabledChanged() {
-    SkColor color = login_constants::kButtonEnabledColor;
+    SkColor color = palette_.button_enabled_color;
     if (!GetEnabled())
       color = SkColorSetA(color, login_constants::kButtonDisabledAlpha);
 
@@ -392,6 +403,8 @@ class LoginPinView::SubmitPinButton : public BasePinButton {
       AddEnabledChangedCallback(
           base::BindRepeating(&LoginPinView::SubmitPinButton::OnEnabledChanged,
                               base::Unretained(this)));
+
+  LoginPalette palette_;
 };
 
 // static
@@ -423,10 +436,11 @@ void LoginPinView::TestApi::SetBackspaceTimers(
 }
 
 LoginPinView::LoginPinView(Style keyboard_style,
+                           const LoginPalette& palette,
                            const OnPinKey& on_key,
                            const OnPinBackspace& on_backspace,
                            const OnPinSubmit& on_submit)
-    : NonAccessibleView(kLoginPinViewClassName) {
+    : NonAccessibleView(kLoginPinViewClassName), palette_(palette) {
   DCHECK(on_key);
   DCHECK(on_backspace);
 
@@ -440,7 +454,7 @@ LoginPinView::LoginPinView(Style keyboard_style,
 
   auto add_digit_button = [&](View* row, int value) {
     row->AddChildView(
-        new DigitPinButton(value, show_letters, kButtonSize, on_key));
+        new DigitPinButton(value, show_letters, palette_, kButtonSize, on_key));
   };
 
   // 1-2-3
@@ -463,14 +477,14 @@ LoginPinView::LoginPinView(Style keyboard_style,
 
   // backspace-0-submit
   row = BuildAndAddRow();
-  backspace_ = row->AddChildView(
-      std::make_unique<BackspacePinButton>(kButtonSize, on_backspace));
+  backspace_ = row->AddChildView(std::make_unique<BackspacePinButton>(
+      palette_, kButtonSize, on_backspace));
   add_digit_button(row, 0);
 
   // Only add the submit button if the callback is valid.
   if (!on_submit.is_null()) {
     submit_button_ = row->AddChildView(
-        std::make_unique<SubmitPinButton>(kButtonSize, on_submit));
+        std::make_unique<SubmitPinButton>(palette_, kButtonSize, on_submit));
   }
 }
 

ash/login/ui/login_pin_view.h

@@ -9,6 +9,7 @@
 #include <vector>
 
 #include "ash/ash_export.h"
+#include "ash/login/ui/login_palette.h"
 #include "ash/login/ui/non_accessible_view.h"
 #include "base/bind_helpers.h"
 #include "base/callback.h"
@@ -95,6 +96,7 @@ class ASH_EXPORT LoginPinView : public NonAccessibleView {
   // If |on_submit| is valid, there will be a submit button on the pinpad that
   // calls it when the user wants to submit the PIN / password.
   LoginPinView(Style keyboard_style,
+               const LoginPalette& palette,
                const OnPinKey& on_key,
                const OnPinBackspace& on_backspace,
                const OnPinSubmit& on_submit = base::NullCallback());
@@ -114,6 +116,8 @@ class ASH_EXPORT LoginPinView : public NonAccessibleView {
   // Builds and returns a new view which contains a row of the PIN keyboard.
   NonAccessibleView* BuildAndAddRow();
 
+  LoginPalette palette_;
+
   BackspacePinButton* backspace_ = nullptr;
   // The submit button does not exist when no |on_submit| callback is passed.
   SubmitPinButton* submit_button_ = nullptr;

ash/login/ui/login_pin_view_unittest.cc

@@ -29,7 +29,7 @@ class LoginPinViewTest : public LoginTestBase {
   // in a widget.
   void CreateLoginPinViewWithStyle(LoginPinView::Style style) {
     view_ =
-        new LoginPinView(style,
+        new LoginPinView(style, CreateDefaultLoginPalette(),
                          base::BindRepeating(&LoginPinViewTest::OnPinKey,
                                              base::Unretained(this)),
                          base::BindRepeating(&LoginPinViewTest::OnPinBackspace,

ash/login/ui/pin_request_view.cc

@@ -333,13 +333,13 @@ PinRequestView::PinRequestView(PinRequest request, Delegate* delegate)
 
   // Pin keyboard. Note that the keyboard's own submit button is disabled via
   // passing a null |on_submit| callback.
-  pin_keyboard_view_ =
-      new LoginPinView(LoginPinView::Style::kAlphanumeric,
-                       base::BindRepeating(&AccessCodeInput::InsertDigit,
-                                           base::Unretained(access_code_view_)),
-                       base::BindRepeating(&AccessCodeInput::Backspace,
-                                           base::Unretained(access_code_view_)),
-                       /*on_submit=*/LoginPinView::OnPinSubmit());
+  pin_keyboard_view_ = new LoginPinView(
+      LoginPinView::Style::kAlphanumeric, CreateDefaultLoginPalette(),
+      base::BindRepeating(&AccessCodeInput::InsertDigit,
+                          base::Unretained(access_code_view_)),
+      base::BindRepeating(&AccessCodeInput::Backspace,
+                          base::Unretained(access_code_view_)),
+      /*on_submit=*/LoginPinView::OnPinSubmit());
   // Backspace key is always enabled and |access_code_| field handles it.
   pin_keyboard_view_->OnPasswordTextChanged(false);
   AddChildView(pin_keyboard_view_);