Android: Customized widget class for history navigation

Arrow widget used for history navigation UI was previously inherited
from ChipView. This CL introduced its own UI widget class that simplifies
APIs and has the right style for the design. It will also be used as
a base class for other elements in the long term design. Also contains:

- centered the arrow in the round icon
- verified the style in dark mode
- icon color is tinted by default to match that of the text
- long text is ellipsized

Bug: 966259
Change-Id: I5e25ded8b72886042b3ab05fe1d5254c03191b75
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626911
Commit-Queue: Jinsuk Kim <jinsukkim@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#664025}

chrome/android/chrome_java_sources.gni

@@ -694,10 +694,10 @@ chrome_java_sources = [
   "java/src/org/chromium/chrome/browser/gcore/GoogleApiClientHelper.java",
   "java/src/org/chromium/chrome/browser/gcore/LifecycleHook.java",
   "java/src/org/chromium/chrome/browser/gesturenav/AndroidUiNavigationGlow.java",
-  "java/src/org/chromium/chrome/browser/gesturenav/ArrowChipView.java",
   "java/src/org/chromium/chrome/browser/gesturenav/CompositorNavigationGlow.java",
   "java/src/org/chromium/chrome/browser/gesturenav/HistoryNavigationDelegate.java",
   "java/src/org/chromium/chrome/browser/gesturenav/HistoryNavigationLayout.java",
+  "java/src/org/chromium/chrome/browser/gesturenav/NavigationBubble.java",
   "java/src/org/chromium/chrome/browser/gesturenav/NavigationGlow.java",
   "java/src/org/chromium/chrome/browser/gesturenav/NavigationGlowFactory.java",
   "java/src/org/chromium/chrome/browser/gesturenav/NavigationHandler.java",

chrome/android/java/res/layout/navigation_bubble.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 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.
+ -->
+
+<org.chromium.chrome.browser.gesturenav.NavigationBubble
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:minHeight="@dimen/navigation_bubble_default_height"
+    android:gravity="center_vertical"
+    android:orientation="horizontal">
+
+    <org.chromium.ui.widget.ChromeImageView
+        android:id="@+id/navigation_bubble_icon"
+        android:layout_width="@dimen/navigation_bubble_icon_size"
+        android:layout_height="@dimen/navigation_bubble_icon_size"
+        android:layout_marginStart="@dimen/navigation_bubble_icon_leading_margin" />
+    <TextView
+        android:id="@+id/navigation_bubble_text"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        android:paddingStart="@dimen/navigation_bubble_horizontal_padding"
+        android:paddingTop="@dimen/navigation_bubble_vertical_padding"
+        android:paddingEnd="@dimen/navigation_bubble_horizontal_padding"
+        android:paddingBottom="@dimen/navigation_bubble_vertical_padding"
+        android:textAppearance="@style/TextAppearance.BlackTitle2"
+        android:maxLines="1"
+        android:ellipsize="end" />
+</org.chromium.chrome.browser.gesturenav.NavigationBubble>

chrome/android/java/res/values/colors.xml

@@ -181,6 +181,11 @@
     <color name="payments_section_edit_background">@color/modern_secondary_color</color>
     <color name="payments_section_chevron">#B2B2B2</color>
 
+    <!-- History Navigation UI colors -->
+    <color name="navigation_bubble_stroke_color">@color/hairline_stroke_color</color>
+    <color name="navigation_bubble_background_color">@color/default_bg_color_elev_4</color>
+    <color name="navigation_bubble_ripple_color">@color/modern_grey_800</color>
+
     <!-- Other colors -->
     <color name="media_viewer_bg">#000000</color>
     <color name="image_viewer_bg">#0E0E0E</color>

chrome/android/java/res/values/dimens.xml

@@ -598,4 +598,11 @@
     <dimen name="radio_button_with_description_lateral_padding">16dp</dimen>
     <dimen name="radio_button_with_description_vertical_padding">10dp</dimen>
 
+    <!-- History Navigation UI Item -->
+    <dimen name="navigation_bubble_border_width">1dp</dimen>
+    <dimen name="navigation_bubble_default_height">32dp</dimen>
+    <dimen name="navigation_bubble_vertical_padding">4dp</dimen>
+    <dimen name="navigation_bubble_horizontal_padding">8dp</dimen>
+    <dimen name="navigation_bubble_icon_size">20dp</dimen>
+    <dimen name="navigation_bubble_icon_leading_margin">8dp</dimen>
 </resources>

chrome/android/java/res_night/values-night/colors.xml

@@ -31,4 +31,8 @@
     <!-- Photo Picker colors -->
     <color name="photo_picker_tile_bg_color">@color/modern_grey_800</color>
     <color name="photo_picker_special_tile_bg_color">@color/modern_grey_800</color>
+
+    <!-- History Navigation UI colors -->
+    <color name="navigation_bubble_ripple_color">@android:color/white</color>
+
 </resources>

chrome/android/java/src/org/chromium/chrome/browser/gesturenav/ArrowChipView.java → chrome/android/java/src/org/chromium/chrome/browser/gesturenav/NavigationBubble.java

 // Copyright 2019 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.
-
 package org.chromium.chrome.browser.gesturenav;
 
 import android.content.Context;
-import android.support.annotation.StyleRes;
+import android.support.annotation.DrawableRes;
+import android.util.AttributeSet;
 import android.view.View;
+import android.view.ViewGroup;
 import android.view.animation.Animation.AnimationListener;
+import android.widget.LinearLayout;
+import android.widget.TextView;
 
+import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.chrome.R;
-import org.chromium.ui.widget.ChipView;
+import org.chromium.ui.widget.ChromeImageView;
+import org.chromium.ui.widget.RippleBackgroundHelper;
 
 /**
- * A widget for arrow and an optional 'close chrome' indicator used for overscroll navigation.
- * TODO(jinsukkim): Implement this using a custom view.
+ * View class for a bubble used in gesture navigation UI that consists of an icon
+ * and an optional text.
  */
-public final class ArrowChipView extends ChipView {
+public class NavigationBubble extends LinearLayout {
+    private final RippleBackgroundHelper mRippleBackgroundHelper;
+
+    private ChromeImageView mIcon;
+    private TextView mText;
     private AnimationListener mListener;
 
-    public ArrowChipView(Context context, @StyleRes int style) {
-        super(context, style);
-        getPrimaryTextView().setText(context.getResources().getString(
-                R.string.overscroll_navigation_close_chrome, context.getString(R.string.app_name)));
-        getPrimaryTextView().setVisibility(View.GONE);
+    /**
+     * Constructor for inflating from XML.
+     */
+    public NavigationBubble(Context context) {
+        this(context, null);
+    }
+
+    public NavigationBubble(Context context, AttributeSet attrs) {
+        super(context, attrs);
+
+        // Reset icon and background. Height is used as corner radius to ensure we have a circle.
+        mRippleBackgroundHelper = new RippleBackgroundHelper(this,
+                R.color.navigation_bubble_background_color, R.color.navigation_bubble_ripple_color,
+                getResources().getDimensionPixelSize(R.dimen.navigation_bubble_default_height),
+                R.color.navigation_bubble_stroke_color, R.dimen.navigation_bubble_border_width);
+    }
+
+    @Override
+    protected void onFinishInflate() {
+        super.onFinishInflate();
+        mIcon = findViewById(R.id.navigation_bubble_icon);
+        mText = findViewById(R.id.navigation_bubble_text);
     }
 
     /**
@@ -39,7 +65,7 @@ public final class ArrowChipView extends ChipView {
      * @return {@code true} if the widget is showing the close chrome indicator text.
      */
     public boolean isShowingCaption() {
-        return getPrimaryTextView().getVisibility() == View.VISIBLE;
+        return getTextView().getVisibility() == View.VISIBLE;
     }
 
     /**
@@ -48,11 +74,11 @@ public final class ArrowChipView extends ChipView {
      */
     public void showCaption(boolean on) {
         if (on && !isShowingCaption()) {
-            getPrimaryTextView().setVisibility(View.VISIBLE);
+            getTextView().setVisibility(View.VISIBLE);
             // Measure the width again after the indicator text becomes visible.
             measure(0, 0);
         } else if (!on && isShowingCaption()) {
-            getPrimaryTextView().setVisibility(View.GONE);
+            getTextView().setVisibility(View.GONE);
         }
     }
 
@@ -71,4 +97,32 @@ public final class ArrowChipView extends ChipView {
             mListener.onAnimationEnd(getAnimation());
         }
     }
+
+    @Override
+    protected void drawableStateChanged() {
+        super.drawableStateChanged();
+        if (mRippleBackgroundHelper != null) {
+            mRippleBackgroundHelper.onDrawableStateChanged();
+        }
+    }
+
+    /**
+     * Sets the icon at the start of the icon view.
+     * @param icon The resource id pointing to the icon.
+     */
+    public void setIcon(@DrawableRes int icon) {
+        mIcon.setVisibility(ViewGroup.VISIBLE);
+        mIcon.setImageResource(icon);
+
+        // Sets the correct tinting on the icon.
+        ApiCompatibilityUtils.setImageTintList(mIcon, mText.getTextColors());
+    }
+
+    /**
+     * Returns the {@link TextView} that contains the label of the widget.
+     * @return A {@link TextView}.
+     */
+    public TextView getTextView() {
+        return mText;
+    }
 }

chrome/android/java/src/org/chromium/chrome/browser/gesturenav/SideSlideLayout.java

@@ -6,6 +6,7 @@ package org.chromium.chrome.browser.gesturenav;
 
 import android.content.Context;
 import android.support.annotation.IntDef;
+import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.AlphaAnimation;
@@ -99,7 +100,7 @@ public class SideSlideLayout extends ViewGroup {
     // True while side gesture is in progress.
     private boolean mIsBeingDragged;
 
-    private ArrowChipView mArrowView;
+    private NavigationBubble mArrowView;
     private int mArrowViewWidth;
 
     // Start position for animation moving the UI back to original offset.
@@ -158,7 +159,11 @@ public class SideSlideLayout extends ViewGroup {
         final float density = getResources().getDisplayMetrics().density;
         mCircleWidth = (int) (CIRCLE_DIAMETER_DP * density);
 
-        mArrowView = new ArrowChipView(getContext(), R.style.AssistiveChip);
+        LayoutInflater layoutInflater = LayoutInflater.from(getContext());
+        mArrowView = (NavigationBubble) layoutInflater.inflate(R.layout.navigation_bubble, null);
+        mArrowView.getTextView().setText(
+                getResources().getString(R.string.overscroll_navigation_close_chrome,
+                        getContext().getString(R.string.app_name)));
         mArrowViewWidth = mCircleWidth;
         addView(mArrowView);
 
@@ -226,8 +231,7 @@ public class SideSlideLayout extends ViewGroup {
     public void setDirection(boolean forward) {
         mIsForward = forward;
         mArrowView.setIcon(
-                forward ? R.drawable.ic_arrow_forward_blue_24dp : R.drawable.ic_arrow_back_24dp,
-                true);
+                forward ? R.drawable.ic_arrow_forward_blue_24dp : R.drawable.ic_arrow_back_24dp);
     }
 
     public void setEnableCloseIndicator(boolean enable) {