Adding ripple effects for touch targets in the views-based lockscreen.

Create LoginButton class as a base class for touch targets to enable
ripple effects.
This CL adds ripple to the following touch targets:
1. Dropdown menu button.
2. Submit button.
3. Pin keyboard button.

Bug: 778740
Change-Id: Ifd856da4ada342d94511fd2ead11933468fa8750
Reviewed-on: https://chromium-review.googlesource.com/739960
Commit-Queue: Xiaoyin Hu <xiaoyinh@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Jacob Dufault <jdufault@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512572}

ash/BUILD.gn

@@ -253,6 +253,8 @@ component("ash") {
     "login/ui/login_base_bubble_view.h",
     "login/ui/login_bubble.cc",
     "login/ui/login_bubble.h",
+    "login/ui/login_button.cc",
+    "login/ui/login_button.h",
     "login/ui/login_constants.h",
     "login/ui/login_data_dispatcher.cc",
     "login/ui/login_data_dispatcher.h",

ash/login/ui/login_bubble.cc

@@ -4,6 +4,7 @@
 
 #include "ash/login/ui/login_bubble.h"
 
+#include "ash/login/ui/login_button.h"
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
 #include "ui/gfx/font.h"
@@ -21,14 +22,17 @@ namespace {
 // The size of the alert icon in the error bubble.
 constexpr int kAlertIconSizeDp = 20;
 
-// Vertical spacing with the anchor view.
-constexpr int kAnchorViewVerticalSpacingDp = 48;
+// Vertical spacing between the anchor view and error bubble.
+constexpr int kAnchorViewErrorBubbleVerticalSpacingDp = 48;
 
 // An alpha value for the sub message in the user menu.
 constexpr SkAlpha kSubMessageColorAlpha = 0x89;
 
 // Horizontal spacing with the anchor view.
-constexpr int kAnchorViewHorizontalSpacingDp = 100;
+constexpr int kAnchorViewHorizontalSpacingDp = 105;
+
+// Vertical spacing between the anchor view and user menu.
+constexpr int kAnchorViewUserMenuVerticalSpacingDp = 4;
 
 views::Label* CreateLabel(const base::string16& message, SkColor color) {
   views::Label* label = new views::Label(message, views::style::CONTEXT_LABEL,
@@ -46,7 +50,8 @@ class LoginErrorBubbleView : public LoginBaseBubbleView {
  public:
   LoginErrorBubbleView(views::StyledLabel* label, views::View* anchor_view)
       : LoginBaseBubbleView(anchor_view) {
-    set_anchor_view_insets(gfx::Insets(kAnchorViewVerticalSpacingDp, 0));
+    set_anchor_view_insets(
+        gfx::Insets(kAnchorViewErrorBubbleVerticalSpacingDp, 0));
 
     views::View* alert_view = new views::View();
     alert_view->SetLayoutManager(
@@ -83,7 +88,8 @@ class LoginUserMenuView : public LoginBaseBubbleView {
         sub_message, SkColorSetA(SK_ColorWHITE, kSubMessageColorAlpha));
     AddChildView(label);
     AddChildView(sub_label);
-    set_anchor_view_insets(gfx::Insets(0, kAnchorViewHorizontalSpacingDp));
+    set_anchor_view_insets(gfx::Insets(kAnchorViewUserMenuVerticalSpacingDp,
+                                       kAnchorViewHorizontalSpacingDp));
 
     // TODO: Show remove user in the menu in login screen.
   }
@@ -132,7 +138,7 @@ void LoginBubble::ShowErrorBubble(views::StyledLabel* label,
 void LoginBubble::ShowUserMenu(const base::string16& message,
                                const base::string16& sub_message,
                                views::View* anchor_view,
-                               views::View* bubble_opener,
+                               LoginButton* bubble_opener,
                                bool show_remove_user) {
   DCHECK_EQ(bubble_view_, nullptr);
   bubble_opener_ = bubble_opener;
@@ -151,6 +157,10 @@ void LoginBubble::ShowTooltip(const base::string16& message,
 }
 
 void LoginBubble::Close() {
+  if (bubble_opener_)
+    bubble_opener_->AnimateInkDrop(views::InkDropState::DEACTIVATED,
+                                   nullptr /*event*/);
+
   if (bubble_view_)
     bubble_view_->GetWidget()->Close();
 }
@@ -198,6 +208,10 @@ void LoginBubble::Show() {
   views::BubbleDialogDelegateView::CreateBubble(bubble_view_)->Show();
   bubble_view_->SetAlignment(views::BubbleBorder::ALIGN_EDGE_TO_ANCHOR_EDGE);
   bubble_view_->GetWidget()->AddObserver(this);
+
+  if (bubble_opener_)
+    bubble_opener_->AnimateInkDrop(views::InkDropState::ACTIVATED,
+                                   nullptr /*event*/);
 }
 
 void LoginBubble::ProcessPressedEvent(const ui::LocatedEvent* event) {

ash/login/ui/login_bubble.h

@@ -16,6 +16,7 @@ class StyledLabel;
 }
 
 namespace ash {
+class LoginButton;
 
 // A wrapper for the bubble view in the login screen.
 // This class observes keyboard events, mouse clicks and touch down events
@@ -38,7 +39,7 @@ class ASH_EXPORT LoginBubble : public views::WidgetObserver,
   void ShowUserMenu(const base::string16& message,
                     const base::string16& sub_message,
                     views::View* anchor_view,
-                    views::View* bubble_opener,
+                    LoginButton* bubble_opener,
                     bool show_remove_user);
 
   // Shows a tooltip.
@@ -68,8 +69,8 @@ class ASH_EXPORT LoginBubble : public views::WidgetObserver,
 
   LoginBaseBubbleView* bubble_view_ = nullptr;
 
-  // A view that could open/close the bubble.
-  views::View* bubble_opener_ = nullptr;
+  // A button that could open/close the bubble.
+  LoginButton* bubble_opener_ = nullptr;
 
   DISALLOW_COPY_AND_ASSIGN(LoginBubble);
 };

ash/login/ui/login_bubble_unittest.cc

@@ -5,9 +5,11 @@
 #include <memory>
 
 #include "ash/login/ui/login_bubble.h"
+#include "ash/login/ui/login_button.h"
 #include "ash/login/ui/login_test_base.h"
 #include "testing/gtest/include/gtest/gtest.h"
 #include "ui/events/test/event_generator.h"
+#include "ui/views/animation/test/ink_drop_host_view_test_api.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/widget/widget.h"
 
@@ -43,7 +45,7 @@ class LoginBubbleTest : public LoginTestBase {
     container_->SetLayoutManager(
         new views::BoxLayout(views::BoxLayout::kVertical));
 
-    bubble_opener_ = new views::View();
+    bubble_opener_ = new LoginButton(nullptr /*listener*/);
     other_view_ = new views::View();
     bubble_opener_->SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
     other_view_->SetFocusBehavior(views::View::FocusBehavior::ALWAYS);
@@ -67,7 +69,7 @@ class LoginBubbleTest : public LoginTestBase {
   // Owned by test widget view hierarchy.
   views::View* container_ = nullptr;
   // Owned by test widget view hierarchy.
-  views::View* bubble_opener_ = nullptr;
+  LoginButton* bubble_opener_ = nullptr;
   // Owned by test widget view hierarchy.
   views::View* other_view_ = nullptr;
 
@@ -176,4 +178,32 @@ TEST_F(LoginBubbleTest, BubbleGestureEventHandling) {
   EXPECT_FALSE(bubble_->IsVisible());
 }
 
+// Verifies the ripple effects for the login button.
+TEST_F(LoginBubbleTest, LoginButtonRipple) {
+  views::test::InkDropHostViewTestApi ink_drop_api(bubble_opener_);
+  EXPECT_EQ(ink_drop_api.ink_drop_mode(),
+            views::InkDropHostView::InkDropMode::ON);
+
+  // Show the bubble to activate the ripple effect.
+  bubble_->ShowUserMenu(base::string16(), base::string16(), container_,
+                        bubble_opener_, false /*show_remove_user*/);
+  EXPECT_TRUE(bubble_->IsVisible());
+  EXPECT_TRUE(ink_drop_api.HasInkDrop());
+  EXPECT_EQ(ink_drop_api.GetInkDrop()->GetTargetInkDropState(),
+            views::InkDropState::ACTIVATED);
+  EXPECT_TRUE(ink_drop_api.GetInkDrop()->IsHighlightFadingInOrVisible());
+
+  // Close the bubble should hide the ripple effect.
+  ui::test::EventGenerator& generator = GetEventGenerator();
+  generator.MoveMouseTo(other_view_->GetBoundsInScreen().CenterPoint());
+  generator.ClickLeftButton();
+  EXPECT_FALSE(bubble_->IsVisible());
+
+  // InkDropState::DEACTIVATED state will automatically transition to the
+  // InkDropState::HIDDEN state.
+  EXPECT_EQ(ink_drop_api.GetInkDrop()->GetTargetInkDropState(),
+            views::InkDropState::HIDDEN);
+  EXPECT_FALSE(ink_drop_api.GetInkDrop()->IsHighlightFadingInOrVisible());
+}
+
 }  // namespace ash

ash/login/ui/login_button.cc

+// Copyright 2017 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_button.h"
+
+#include "ash/ash_constants.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_highlight.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/animation/ink_drop_mask.h"
+
+namespace ash {
+
+namespace {
+
+// Color of the ink drop ripple.
+constexpr SkColor kInkDropRippleColor =
+    SkColorSetARGBMacro(0x0F, 0xFF, 0xFF, 0xFF);
+
+// Color of the ink drop highlight.
+constexpr SkColor kInkDropHighlightColor =
+    SkColorSetARGBMacro(0x14, 0xFF, 0xFF, 0xFF);
+
+}  // namespace
+
+LoginButton::LoginButton(views::ButtonListener* listener)
+    : views::ImageButton(listener) {
+  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
+                    views::ImageButton::ALIGN_MIDDLE);
+  SetFocusPainter(views::Painter::CreateSolidFocusPainter(
+      kFocusBorderColor, kFocusBorderThickness, gfx::InsetsF()));
+  SetInkDropMode(InkDropHostView::InkDropMode::ON);
+  set_has_ink_drop_action_on_click(true);
+}
+
+LoginButton::~LoginButton() = default;
+
+std::unique_ptr<views::InkDrop> LoginButton::CreateInkDrop() {
+  std::unique_ptr<views::InkDropImpl> ink_drop =
+      CreateDefaultFloodFillInkDropImpl();
+  ink_drop->SetShowHighlightOnHover(false);
+  return std::move(ink_drop);
+}
+
+std::unique_ptr<views::InkDropMask> LoginButton::CreateInkDropMask() const {
+  return std::make_unique<views::CircleInkDropMask>(
+      size(), GetLocalBounds().CenterPoint(), GetInkDropRadius());
+}
+
+std::unique_ptr<views::InkDropRipple> LoginButton::CreateInkDropRipple() const {
+  gfx::Point center = GetLocalBounds().CenterPoint();
+  const int radius = GetInkDropRadius();
+  gfx::Rect bounds(center.x() - radius, center.y() - radius, radius * 2,
+                   radius * 2);
+
+  return std::make_unique<views::FloodFillInkDropRipple>(
+      size(), GetLocalBounds().InsetsFrom(bounds),
+      GetInkDropCenterBasedOnLastEvent(), kInkDropRippleColor,
+      1.f /*visible_opacity*/);
+}
+
+std::unique_ptr<views::InkDropHighlight> LoginButton::CreateInkDropHighlight()
+    const {
+  return std::make_unique<views::InkDropHighlight>(
+      gfx::PointF(GetLocalBounds().CenterPoint()),
+      std::make_unique<views::CircleLayerDelegate>(kInkDropHighlightColor,
+                                                   GetInkDropRadius()));
+}
+
+int LoginButton::GetInkDropRadius() const {
+  return std::min(GetLocalBounds().width(), GetLocalBounds().height()) / 2;
+}
+
+}  // namespace ash

ash/login/ui/login_button.h

+// Copyright 2017 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_BUTTON_H_
+#define ASH_LOGIN_UI_LOGIN_BUTTON_H_
+
+#include "ash/ash_export.h"
+#include "ui/views/controls/button/image_button.h"
+#include "ui/views/view.h"
+
+namespace ash {
+
+// This class adds ripple effects for touch targets in the lockscreen.
+class ASH_EXPORT LoginButton : public views::ImageButton {
+ public:
+  explicit LoginButton(views::ButtonListener* listener);
+  ~LoginButton() override;
+
+  // views::InkDropHost:
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override;
+  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override;
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override;
+
+ private:
+  int GetInkDropRadius() const;
+
+  DISALLOW_COPY_AND_ASSIGN(LoginButton);
+};
+
+}  // namespace ash
+
+#endif  // ASH_LOGIN_UI_LOGIN_BUTTON_H_

ash/login/ui/login_password_view.cc

@@ -5,6 +5,7 @@
 #include "ash/login/ui/login_password_view.h"
 
 #include "ash/login/ui/hover_notifier.h"
+#include "ash/login/ui/login_button.h"
 #include "ash/login/ui/login_constants.h"
 #include "ash/login/ui/non_accessible_view.h"
 #include "ash/resources/vector_icons/vector_icons.h"
@@ -401,7 +402,7 @@ LoginPasswordView::LoginPasswordView() : ime_keyboard_observer_(this) {
   capslock_icon_->SetVisible(false);
 
   // Submit button.
-  submit_button_ = new views::ImageButton(this);
+  submit_button_ = new LoginButton(this);
   submit_button_->SetImage(
       views::Button::STATE_NORMAL,
       gfx::CreateVectorIcon(kLockScreenArrowIcon, kSubmitButtonSizeDp,
@@ -412,8 +413,6 @@ LoginPasswordView::LoginPasswordView() : ime_keyboard_observer_(this) {
           kLockScreenArrowIcon, kSubmitButtonSizeDp,
           SkColorSetA(login_constants::kButtonEnabledColor,
                       login_constants::kButtonDisabledAlpha)));
-  submit_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                    views::ImageButton::ALIGN_MIDDLE);
   submit_button_->SetAccessibleName(l10n_util::GetStringUTF16(
       IDS_ASH_LOGIN_POD_SUBMIT_BUTTON_ACCESSIBLE_NAME));
   password_row_->AddChildView(submit_button_);

ash/login/ui/login_password_view.h

@@ -19,13 +19,13 @@
 namespace views {
 class Button;
 class ButtonListener;
-class ImageButton;
 class ImageView;
 class Separator;
 class Textfield;
 }  // namespace views
 
 namespace ash {
+class LoginButton;
 
 // Contains a textfield instance with a submit button. The user can type a
 // password into the textfield and hit enter to submit.
@@ -133,7 +133,7 @@ class ASH_EXPORT LoginPasswordView
   views::View* password_row_ = nullptr;
 
   views::Textfield* textfield_ = nullptr;
-  views::ImageButton* submit_button_ = nullptr;
+  LoginButton* submit_button_ = nullptr;
   views::ImageView* capslock_icon_ = nullptr;
   views::Separator* separator_ = nullptr;
   EasyUnlockIcon* easy_unlock_icon_ = nullptr;

ash/login/ui/login_pin_view.cc

@@ -7,6 +7,7 @@
 #include <memory>
 
 #include "ash/ash_constants.h"
+#include "ash/login/ui/login_button.h"
 #include "ash/login/ui/login_constants.h"
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/strings/grit/ash_strings.h"
@@ -47,14 +48,6 @@ const int kInitialBackspaceDelayMs = 500;
 // After the first auto-submit, how long until the next backspace event fires?
 const int kRepeatingBackspaceDelayMs = 150;
 
-// Color of the ink drop ripple.
-constexpr SkColor kInkDropRippleColor =
-    SkColorSetARGBMacro(0xF, 0xFF, 0xFF, 0xFF);
-
-// Color of the ink drop highlight.
-constexpr SkColor kInkDropHighlightColor =
-    SkColorSetARGBMacro(0x14, 0xFF, 0xFF, 0xFF);
-
 base::string16 GetButtonLabelForNumber(int value) {
   DCHECK(value >= 0 && value < int{arraysize(kPinLabels)});
   return base::ASCIIToUTF16(std::to_string(value));
@@ -73,23 +66,18 @@ int GetViewIdForPinNumber(int number) {
 }
 
 // A base class for pin button in the pin keyboard.
-class BasePinButton : public views::Button, public views::ButtonListener {
+class BasePinButton : public LoginButton, public views::ButtonListener {
  public:
   explicit BasePinButton(const base::Closure& on_press)
-      : views::Button(this), on_press_(on_press) {
+      : LoginButton(this), on_press_(on_press) {
     SetFocusBehavior(FocusBehavior::ALWAYS);
     SetPreferredSize(
         gfx::Size(LoginPinView::kButtonSizeDp, LoginPinView::kButtonSizeDp));
-    SetFocusPainter(views::Painter::CreateSolidFocusPainter(
-        kFocusBorderColor, kFocusBorderThickness, gfx::InsetsF()));
     auto* layout = new views::BoxLayout(views::BoxLayout::kVertical);
     layout->set_main_axis_alignment(
         views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
     SetLayoutManager(layout);
 
-    SetInkDropMode(InkDropHostView::InkDropMode::ON);
-    set_has_ink_drop_action_on_click(true);
-
     // Layer rendering is needed for animation. Enable it here for
     // focus painter to paint.
     SetPaintToLayer();
@@ -106,42 +94,6 @@ class BasePinButton : public views::Button, public views::ButtonListener {
       on_press_.Run();
   }
 
-  std::unique_ptr<views::InkDrop> CreateInkDrop() override {
-    std::unique_ptr<views::InkDropImpl> ink_drop =
-        std::make_unique<views::InkDropImpl>(this, size());
-    ink_drop->SetShowHighlightOnHover(false);
-    ink_drop->SetShowHighlightOnFocus(false);
-    ink_drop->SetAutoHighlightMode(
-        views::InkDropImpl::AutoHighlightMode::SHOW_ON_RIPPLE);
-    return std::move(ink_drop);
-  }
-
-  std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override {
-    return std::make_unique<views::CircleInkDropMask>(
-        size(), GetLocalBounds().CenterPoint(),
-        LoginPinView::kButtonSizeDp / 2);
-  }
-
-  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override {
-    gfx::Point center = GetLocalBounds().CenterPoint();
-    gfx::Rect bounds(center.x() - LoginPinView::kButtonSizeDp / 2,
-                     center.y() - LoginPinView::kButtonSizeDp / 2,
-                     LoginPinView::kButtonSizeDp, LoginPinView::kButtonSizeDp);
-
-    return std::make_unique<views::FloodFillInkDropRipple>(
-        size(), GetLocalBounds().InsetsFrom(bounds),
-        GetInkDropCenterBasedOnLastEvent(), kInkDropRippleColor,
-        1.f /*visible_opacity*/);
-  }
-
-  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
-      const override {
-    return std::make_unique<views::InkDropHighlight>(
-        gfx::PointF(GetLocalBounds().CenterPoint()),
-        std::make_unique<views::CircleLayerDelegate>(
-            kInkDropHighlightColor, LoginPinView::kButtonSizeDp / 2));
-  }
-
  protected:
   base::Closure on_press_;
 
@@ -200,12 +152,17 @@ class LoginPinView::BackspacePinButton : public BasePinButton {
       : BasePinButton(on_press),
         delay_timer_(std::make_unique<base::OneShotTimer>()),
         repeat_timer_(std::make_unique<base::RepeatingTimer>()) {
-    image_ = new views::ImageView();
-    AddChildView(image_);
-
+    SetImage(views::Button::STATE_NORMAL,
+             gfx::CreateVectorIcon(kLockScreenBackspaceIcon,
+                                   login_constants::kButtonEnabledColor));
+    SetImage(views::Button::STATE_DISABLED,
+             gfx::CreateVectorIcon(
+                 kLockScreenBackspaceIcon,
+                 SkColorSetA(login_constants::kButtonEnabledColor,
+                             login_constants::kButtonDisabledAlpha)));
     SetAccessibleName(
         l10n_util::GetStringUTF16(IDS_ASH_PIN_KEYBOARD_DELETE_ACCESSIBLE_NAME));
-    SetDisabled(true);
+    SetEnabled(false);
   }
 
   ~BackspacePinButton() override = default;
@@ -216,17 +173,6 @@ class LoginPinView::BackspacePinButton : public BasePinButton {
     repeat_timer_ = std::move(repeat_timer);
   }
 
-  void SetDisabled(bool disabled) {
-    if (disabled_ == disabled)
-      return;
-    disabled_ = disabled;
-    image_->SetImage(gfx::CreateVectorIcon(
-        kLockScreenBackspaceIcon,
-        disabled_ ? SkColorSetA(login_constants::kButtonEnabledColor,
-                                login_constants::kButtonDisabledAlpha)
-                  : login_constants::kButtonEnabledColor));
-  }
-
   // BasePinButton:
   bool OnMousePressed(const ui::MouseEvent& event) override {
     did_autosubmit_ = false;
@@ -268,8 +214,6 @@ class LoginPinView::BackspacePinButton : public BasePinButton {
     on_press_.Run();
   }
 
-  views::ImageView* image_;
-  bool disabled_ = false;
   bool did_autosubmit_ = false;
   std::unique_ptr<base::Timer> delay_timer_;
   std::unique_ptr<base::Timer> repeat_timer_;
@@ -350,7 +294,7 @@ LoginPinView::LoginPinView(const OnPinKey& on_key,
 LoginPinView::~LoginPinView() = default;
 
 void LoginPinView::OnPasswordTextChanged(bool is_empty) {
-  backspace_->SetDisabled(is_empty);
+  backspace_->SetEnabled(!is_empty);
 }
 
 bool LoginPinView::OnKeyPressed(const ui::KeyEvent& event) {

ash/login/ui/login_pin_view_unittest.cc

@@ -63,6 +63,7 @@ TEST_F(LoginPinViewTest, ButtonsFireEvents) {
 
   // Verify backspace events are emitted.
   EXPECT_EQ(0, backspace_);
+  test_api.GetBackspaceButton()->SetEnabled(true);
   test_api.GetBackspaceButton()->RequestFocus();
   generator.PressKey(ui::KeyboardCode::VKEY_RETURN, ui::EF_NONE);
   EXPECT_EQ(1, backspace_);
@@ -138,6 +139,7 @@ TEST_F(LoginPinViewTest, BackspaceAutoSubmitsAndRepeats) {
 
   // Verify backspace events are emitted.
   EXPECT_EQ(0, backspace_);
+  test_api.GetBackspaceButton()->SetEnabled(true);
   generator.MoveMouseTo(
       test_api.GetBackspaceButton()->GetBoundsInScreen().CenterPoint());
   generator.PressLeftButton();

ash/login/ui/login_user_view.cc

@@ -11,6 +11,7 @@
 #include "ash/login/ui/hover_notifier.h"
 #include "ash/login/ui/image_parser.h"
 #include "ash/login/ui/login_bubble.h"
+#include "ash/login/ui/login_button.h"
 #include "ash/login/ui/login_constants.h"
 #include "ash/login/ui/non_accessible_view.h"
 #include "ash/login/ui/user_switch_flip_animation.h"
@@ -36,13 +37,13 @@ namespace {
 // Vertical spacing between icon, label, and authentication UI.
 constexpr int kVerticalSpacingBetweenEntriesDp = 32;
 // Horizontal spacing between username label and the dropdown icon.
-constexpr int kDistanceBetweenUsernameAndDropdownDp = 12;
+constexpr int kDistanceBetweenUsernameAndDropdownDp = 8;
 // Distance from the top of the user view to the user icon.
 constexpr int kDistanceFromTopOfBigUserViewToUserIconDp = 54;
 // Distance between user icon and the user label in small/extra-small layouts.
 constexpr int kSmallManyDistanceFromUserIconToUserLabelDp = 16;
 
-constexpr int kDropdownIconSizeDp = 20;
+constexpr int kDropdownIconSizeDp = 28;
 
 // Width/height of the user view. Ensures proper centering.
 constexpr int kLargeUserViewWidthDp = 306;
@@ -241,15 +242,14 @@ LoginUserView::LoginUserView(LoginDisplayStyle style,
   user_image_ = new UserImage(GetImageSize(style));
   user_label_ = new UserLabel(style);
   if (show_dropdown) {
-    user_dropdown_ = new views::ImageButton(this);
+    user_dropdown_ = new LoginButton(this);
+    user_dropdown_->set_has_ink_drop_action_on_click(false);
     user_dropdown_->SetPreferredSize(
         gfx::Size(kDropdownIconSizeDp, kDropdownIconSizeDp));
     user_dropdown_->SetImage(
         views::Button::STATE_NORMAL,
         gfx::CreateVectorIcon(kLockScreenDropdownIcon, SK_ColorWHITE));
     user_dropdown_->SetFocusBehavior(FocusBehavior::ALWAYS);
-    user_dropdown_->SetFocusPainter(views::Painter::CreateSolidFocusPainter(
-        kFocusBorderColor, kFocusBorderThickness, gfx::InsetsF()));
   }
 
   switch (style) {

ash/login/ui/login_user_view.h

@@ -12,14 +12,11 @@
 #include "ui/views/controls/button/button.h"
 #include "ui/views/view.h"
 
-namespace views {
-class ImageButton;
-}
-
 namespace ash {
 
 class HoverNotifier;
 class LoginBubble;
+class LoginButton;
 
 // Display the user's profile icon, name, and a menu icon in various layout
 // styles.
@@ -99,7 +96,7 @@ class ASH_EXPORT LoginUserView : public views::Button,
   LoginDisplayStyle display_style_;
   UserImage* user_image_ = nullptr;
   UserLabel* user_label_ = nullptr;
-  views::ImageButton* user_dropdown_ = nullptr;
+  LoginButton* user_dropdown_ = nullptr;
   std::unique_ptr<LoginBubble> user_menu_;
 
   // True iff the view is currently opaque (ie, opacity = 1).