Replace inkdrop highlights with focus ring.

app_list_utils will be refactored in the future so ash/search_box
will be able to take advantage of PaintFocusRing().

see: crbug/1289467

Bug: 1288658
Change-Id: I51126d801f5dabcb0e8d8d0f345bb74bb8b02ddf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3405465
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Auto-Submit: Yulun Wu <yulunwu@chromium.org>
Commit-Queue: Yulun Wu <yulunwu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#962603}

ash/app_list/app_list_util.cc

@@ -128,8 +128,8 @@ gfx::ImageSkia CreateIconWithCircleBackground(const gfx::ImageSkia& icon,
 }
 
 void PaintFocusBar(gfx::Canvas* canvas,
-                   const gfx::Point content_origin,
-                   const int height) {
+                   const gfx::Point& content_origin,
+                   int height) {
   SkPath path;
   gfx::Rect focus_bar_bounds(content_origin.x() - kFocusBarThickness,
                              content_origin.y(), kFocusBarThickness * 2,
@@ -148,6 +148,18 @@ void PaintFocusBar(gfx::Canvas* canvas,
   canvas->DrawLine(top_point, bottom_point, flags);
 }
 
+void PaintFocusRing(gfx::Canvas* canvas,
+                    const gfx::Point& content_origin,
+                    int outer_radius) {
+  cc::PaintFlags circle_flags;
+  circle_flags.setAntiAlias(true);
+  circle_flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
+  circle_flags.setStyle(cc::PaintFlags::kStroke_Style);
+  circle_flags.setStrokeWidth(kFocusBorderThickness);
+  canvas->DrawCircle(content_origin, outer_radius - kFocusBorderThickness,
+                     circle_flags);
+}
+
 void SetViewIgnoredForAccessibility(views::View* view, bool ignored) {
   auto& view_accessibility = view->GetViewAccessibility();
   view_accessibility.OverrideIsLeaf(ignored);

ash/app_list/app_list_util.h

@@ -46,16 +46,16 @@ ASH_EXPORT bool IsArrowKeyEvent(const ui::KeyEvent& event);
 // |VKEY_RIGHT|, |VKEY_DOWN|
 ASH_EXPORT bool IsArrowKey(const ui::KeyboardCode& key_code);
 
-// Returns true if the |item| is a folder item.
+// Returns true if the `item` is a folder item.
 ASH_EXPORT bool IsFolderItem(AppListItem* item);
 
 // Returns true if the arrow key event should move focus away from the
-// |textfield|. This is usually when the insertion point would move away from
+// `textfield`. This is usually when the insertion point would move away from
 // text.
 ASH_EXPORT bool LeftRightKeyEventShouldExitText(views::Textfield* textfield,
                                                 const ui::KeyEvent& key_event);
 
-// Processes left/right key traversal for the given |textfield|. Returns true
+// Processes left/right key traversal for the given `textfield`. Returns true
 // if focus is moved.
 ASH_EXPORT bool ProcessLeftRightKeyTraversalForTextfield(
     views::Textfield* textfield,
@@ -67,11 +67,17 @@ ASH_EXPORT gfx::ImageSkia CreateIconWithCircleBackground(
     const gfx::ImageSkia& icon,
     SkColor background_color);
 
-// Paints a rounded focus bar on |canvas| starting at |content_origin| extending
-// |height| dips vertically.
+// Paints a rounded focus bar on `canvas` starting at `content_origin` extending
+// `height` dips vertically.
 ASH_EXPORT void PaintFocusBar(gfx::Canvas* canvas,
-                              const gfx::Point content_origin,
-                              const int height);
+                              const gfx::Point& content_origin,
+                              int height);
+
+// Paints a circle on `canvas` centered at `content_origin` with inner radius
+// `radius`.
+ASH_EXPORT void PaintFocusRing(gfx::Canvas* canvas,
+                               const gfx::Point& content_origin,
+                               int outer_radius);
 
 // Sets a view as an ignored leaf node, so that it and its child views will be
 // ignored by ChromeVox.

ash/app_list/views/search_result_actions_view.cc

@@ -9,6 +9,7 @@
 #include <algorithm>
 #include <memory>
 
+#include "ash/app_list/app_list_util.h"
 #include "ash/app_list/views/search_result_actions_view_delegate.h"
 #include "ash/app_list/views/search_result_view.h"
 #include "ash/public/cpp/app_list/app_list_color_provider.h"
@@ -34,8 +35,6 @@ namespace {
 // Image buttons.
 constexpr int kImageButtonSizeDip = 40;
 constexpr int kActionButtonBetweenSpacing = 8;
-// The width of the focus ring.
-constexpr int kFocusRingWidth = 2;
 
 }  // namespace
 
@@ -155,13 +154,7 @@ void SearchResultImageButton::UpdateOnStateChanged() {
 
 void SearchResultImageButton::OnPaintBackground(gfx::Canvas* canvas) {
   if (HasFocus() || parent_->GetSelectedAction() == tag()) {
-    cc::PaintFlags circle_flags;
-    circle_flags.setAntiAlias(true);
-    circle_flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
-    circle_flags.setStyle(cc::PaintFlags::kStroke_Style);
-    circle_flags.setStrokeWidth(kFocusRingWidth);
-    canvas->DrawCircle(GetLocalBounds().CenterPoint(),
-                       GetButtonRadius() - kFocusRingWidth, circle_flags);
+    PaintFocusRing(canvas, GetLocalBounds().CenterPoint(), GetButtonRadius());
   }
 }
 

ash/search_box/search_box_view_base.cc

@@ -47,12 +47,11 @@ constexpr base::TimeDelta kSearchIconAnimationDuration =
 
 constexpr int kInnerPadding = 16;
 
+constexpr int kFocusBorderThickness = 2;
+
 // Preferred width of search box.
 constexpr int kSearchBoxPreferredWidth = 544;
 
-// The keyboard select colour (6% black).
-constexpr SkColor kSelectedColor = SkColorSetARGB(15, 0, 0, 0);
-
 constexpr SkColor kSearchTextColor = SkColorSetRGB(0x33, 0x33, 0x33);
 
 // The duration for the button fade out animation.
@@ -110,36 +109,6 @@ class SearchBoxImageButton : public views::ImageButton {
 
     SetPaintToLayer();
     layer()->SetFillsBoundsOpaquely(false);
-    views::InkDrop::Get(this)->SetMode(views::InkDropHost::InkDropMode::ON);
-    // InkDropState will reset after clicking.
-    SetHasInkDropActionOnClick(true);
-    views::InkDrop::Get(this)->SetCreateHighlightCallback(base::BindRepeating(
-        [](Button* host) {
-          constexpr SkColor ripple_color =
-              SkColorSetA(gfx::kGoogleGrey900, 0x12);
-          auto highlight = std::make_unique<views::InkDropHighlight>(
-              gfx::SizeF(host->size()), ripple_color);
-          highlight->set_visible_opacity(1.f);
-          return highlight;
-        },
-        this));
-    views::InkDrop::Get(this)->SetCreateRippleCallback(base::BindRepeating(
-        [](SearchBoxImageButton* host)
-            -> std::unique_ptr<views::InkDropRipple> {
-          const gfx::Point center = host->GetLocalBounds().CenterPoint();
-          const int ripple_radius = host->GetInkDropRadius();
-          gfx::Rect bounds(center.x() - ripple_radius,
-                           center.y() - ripple_radius, 2 * ripple_radius,
-                           2 * ripple_radius);
-          constexpr SkColor ripple_color =
-              SkColorSetA(gfx::kGoogleGrey900, 0x17);
-
-          return std::make_unique<views::FloodFillInkDropRipple>(
-              host->size(), host->GetLocalBounds().InsetsFrom(bounds),
-              views::InkDrop::Get(host)->GetInkDropCenterBasedOnLastEvent(),
-              ripple_color, 1.0f);
-        },
-        this));
 
     SetPreferredSize({kSearchBoxButtonSizeDip, kSearchBoxButtonSizeDip});
     SetImageHorizontalAlignment(ALIGN_CENTER);
@@ -179,7 +148,7 @@ class SearchBoxImageButton : public views::ImageButton {
   bool is_showing() { return is_showing_; }
 
  private:
-  int GetInkDropRadius() const { return width() / 2; }
+  int GetButtonRadius() const { return width() / 2; }
 
   // Whether the button is showing/shown or hiding/hidden.
   bool is_showing_ = false;
@@ -189,9 +158,11 @@ class SearchBoxImageButton : public views::ImageButton {
     if (HasFocus()) {
       cc::PaintFlags circle_flags;
       circle_flags.setAntiAlias(true);
-      circle_flags.setColor(kSelectedColor);
-      circle_flags.setStyle(cc::PaintFlags::kFill_Style);
-      canvas->DrawCircle(GetLocalBounds().CenterPoint(), GetInkDropRadius(),
+      circle_flags.setColor(AppListColorProvider::Get()->GetFocusRingColor());
+      circle_flags.setStyle(cc::PaintFlags::kStroke_Style);
+      circle_flags.setStrokeWidth(kFocusBorderThickness);
+      canvas->DrawCircle(GetLocalBounds().CenterPoint(),
+                         GetButtonRadius() - kFocusBorderThickness,
                          circle_flags);
     }
   }