Add a round corner rectangle IPH for ChipView

This CL add a new shape, round corner rectangle IPH for ChipView.
There will be a follow up CL for renaming the turnOnHighlight to
turnOnCircularHighlight and turnOnRectangularHighlight in ViewHighlighter
to unify the name in the class.

Bug: 1136169
Change-Id: I1c8efefb788942905f8142e04621b350b2c602a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2500274Reviewed-by: Gang Wu <gangwu@chromium.org>
Reviewed-by: Theresa  <twellington@chromium.org>
Commit-Queue: Gang Wu <gangwu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#821400}

chrome/android/java/src/org/chromium/chrome/browser/app/appmenu/ChipViewMenuItemViewBinder.java

@@ -104,9 +104,8 @@ class ChipViewMenuItemViewBinder implements CustomViewBinder {
                     v -> appMenuClickHandler.onItemClick(finalChipViewMenuItem));
 
             if (highlightedItemId != null && chipViewMenuItem.getItemId() == highlightedItemId) {
-                // TODO(crbug.com/1136169): Should not remove the background once the bug fixed.
-                holder.chipView.setBackgroundResource(0);
-                ViewHighlighter.turnOnHighlight(holder.chipView, true);
+                ViewHighlighter.turnOnRectangularHighlight(
+                        holder.chipView, holder.chipView.getCornerRadius());
             } else {
                 ViewHighlighter.turnOffHighlight(holder.chipView);
             }

components/browser_ui/widget/android/java/src/org/chromium/components/browser_ui/widget/highlight/PulseDrawable.java

@@ -11,6 +11,7 @@ import android.graphics.ColorFilter;
 import android.graphics.Paint;
 import android.graphics.PixelFormat;
 import android.graphics.Rect;
+import android.graphics.RectF;
 import android.graphics.drawable.Animatable;
 import android.graphics.drawable.Drawable;
 import android.os.SystemClock;
@@ -18,6 +19,7 @@ import android.view.animation.Interpolator;
 
 import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
+import androidx.annotation.Px;
 import androidx.core.view.animation.PathInterpolatorCompat;
 
 import org.chromium.base.ApiCompatibilityUtils;
@@ -131,11 +133,13 @@ public class PulseDrawable extends Drawable implements Animatable {
     /**
      * Creates a {@link PulseDrawable} that will fill the bounds with a pulsing color.
      * @param context The {@link Context} under which the drawable is created.
+     * @param cornerRadius The corner radius in pixels of the highlight rectangle, 0 may be passed
+     *         if the rectangle should not be rounded.
      * @param pulseEndAuthority The {@link PulseEndAuthority} associated with this drawable.
      * @return A new {@link PulseDrawable} instance.
      */
-    public static PulseDrawable createHighlight(
-            Context context, PulseEndAuthority pulseEndAuthority) {
+    public static PulseDrawable createRoundedRectangle(
+            Context context, @Px int cornerRadius, PulseEndAuthority pulseEndAuthority) {
         Painter painter = new Painter() {
             @Override
             public void modifyDrawable(PulseDrawable drawable, float interpolation) {
@@ -145,7 +149,8 @@ public class PulseDrawable extends Drawable implements Animatable {
             @Override
             public void draw(
                     PulseDrawable drawable, Paint paint, Canvas canvas, float interpolation) {
-                canvas.drawRect(drawable.getBounds(), paint);
+                canvas.drawRoundRect(
+                        new RectF(drawable.getBounds()), cornerRadius, cornerRadius, paint);
             }
         };
 
@@ -158,10 +163,22 @@ public class PulseDrawable extends Drawable implements Animatable {
      * PulseDrawable} will continue pulsing forever (if this is not the desired behavior, please use
      * {@link PulseEndAuthority}).
      * @param context The {@link Context} under which the drawable is created.
+     * @param cornerRadius The corner radius in pixels of the highlight rectangle.
      * @return A new {@link PulseDrawable} instance.
      */
-    public static PulseDrawable createHighlight(Context context) {
-        return createHighlight(context, new EndlessPulser());
+    public static PulseDrawable createRoundedRectangle(Context context, @Px int cornerRadius) {
+        return createRoundedRectangle(context, cornerRadius, new EndlessPulser());
+    }
+
+    /**
+     * Creates a {@link PulseDrawable} that will fill the bounds with a pulsing color. The {@link
+     * PulseDrawable} will continue pulsing forever (if this is not the desired behavior, please use
+     * {@link PulseEndAuthority}).
+     * @param context The {@link Context} under which the drawable is created.
+     * @return A new {@link PulseDrawable} instance.
+     */
+    public static PulseDrawable createRectangle(Context context) {
+        return createRoundedRectangle(context, 0);
     }
 
     /**

components/browser_ui/widget/android/java/src/org/chromium/components/browser_ui/widget/highlight/ViewHighlighter.java

@@ -11,6 +11,8 @@ import android.graphics.drawable.Drawable;
 import android.graphics.drawable.LayerDrawable;
 import android.view.View;
 
+import androidx.annotation.Px;
+
 import org.chromium.base.ContextUtils;
 import org.chromium.components.browser_ui.widget.R;
 
@@ -54,8 +56,8 @@ public class ViewHighlighter {
 
         PulseDrawable pulseDrawable = circular
                 ? createCircle(view.getContext(), new NumberPulser(view, numPulses))
-                : PulseDrawable.createHighlight(
-                        view.getContext(), new NumberPulser(view, numPulses));
+                : PulseDrawable.createRoundedRectangle(
+                        view.getContext(), 0 /*cornerRadius*/, new NumberPulser(view, numPulses));
 
         attachViewAsHighlight(view, pulseDrawable);
     }
@@ -69,7 +71,21 @@ public class ViewHighlighter {
         if (view == null) return;
 
         PulseDrawable pulseDrawable = circular ? PulseDrawable.createCircle(view.getContext())
-                                               : PulseDrawable.createHighlight(view.getContext());
+                                               : PulseDrawable.createRectangle(view.getContext());
+
+        attachViewAsHighlight(view, pulseDrawable);
+    }
+
+    /**
+     * Create a rectangle highlight layer over the view.
+     * @param view The view to be highlighted.
+     * @param cornerRadius The corner radius in pixels of the rectangle.
+     */
+    public static void turnOnRectangularHighlight(View view, @Px int cornerRadius) {
+        if (view == null) return;
+
+        PulseDrawable pulseDrawable =
+                PulseDrawable.createRoundedRectangle(view.getContext(), cornerRadius);
 
         attachViewAsHighlight(view, pulseDrawable);
     }
@@ -91,7 +107,7 @@ public class ViewHighlighter {
         Resources resources = view.getContext().getResources();
         Drawable background = view.getBackground();
         if (background != null) {
-            background = background.getConstantState().newDrawable(resources);
+            background = background.getConstantState().newDrawable();
         }
 
         Drawable[] layers = background == null ? new Drawable[] {pulseDrawable}

ui/android/java/src/org/chromium/ui/widget/ChipView.java

@@ -48,6 +48,7 @@ public class ChipView extends LinearLayout {
     private final int mEndIconHeight;
     private final int mEndIconStartPadding;
     private final int mEndIconEndPadding;
+    private final int mCornerRadius;
 
     private ViewGroup mEndIconWrapper;
     private TextView mSecondaryText;
@@ -101,7 +102,7 @@ public class ChipView extends LinearLayout {
                 a.getResourceId(R.styleable.ChipView_chipColor, R.color.chip_background_color);
         int rippleColorId =
                 a.getResourceId(R.styleable.ChipView_rippleColor, R.color.chip_ripple_color);
-        int cornerRadius = a.getDimensionPixelSize(R.styleable.ChipView_cornerRadius,
+        mCornerRadius = a.getDimensionPixelSize(R.styleable.ChipView_cornerRadius,
                 getContext().getResources().getDimensionPixelSize(R.dimen.chip_corner_radius));
         int iconWidth = a.getDimensionPixelSize(R.styleable.ChipView_iconWidth,
                 getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
@@ -161,7 +162,7 @@ public class ChipView extends LinearLayout {
 
         // Reset icon and background:
         mRippleBackgroundHelper = new RippleBackgroundHelper(this, chipColorId, rippleColorId,
-                cornerRadius, R.color.chip_stroke_color, chipBorderWidthId, verticalInset);
+                mCornerRadius, R.color.chip_stroke_color, chipBorderWidthId, verticalInset);
         setIcon(INVALID_ICON_ID, false);
     }
 
@@ -285,4 +286,11 @@ public class ChipView extends LinearLayout {
             ApiCompatibilityUtils.setImageTintList(mStartIcon, null);
         }
     }
+
+    /**
+     * @return The corner radius in pixels of this ChipView.
+     */
+    public @Px int getCornerRadius() {
+        return mCornerRadius;
+    }
 }