[Android] Introduce Assistive Chips with Secondary Titles

Next to suggestive and input chips, there are assistive chips which
perform more sophisticated actions (like autofilling the whole page).

This CL doesn't change:
- input chips (e.g. in accessory sheet)
- suggestive chips (e.g. in Downloads header)

This CL adds:
- styles for assistive chips
- a secondary text used in assistive chips
- a consumer (autofill chips) using assistive chips

Minor fix:
- RTL support for accessory sheets (wrong padding uncovered by this CL)
- allow setting untinted icons

Autofill suggestions before this CL:
https://photos.app.goo.gl/9GxKMy4oeCyKcbgY9

Autofill suggestions with this CL:
https://photos.app.goo.gl/5qPEdXWbA4jxbyVZ6

Autofill suggestions with follow-up (using secondary text and icons):
https://photos.app.goo.gl/nMVp3jxnGULSLLtd7

Autofill chip mocks:
http://slides/1f8LgG2PgUTXJWgXSO2Y9yOhYDKTmkGv1f27_KYb7ICQ#slide=id.g4c6efbd9b1_0_51

Bug: 853772
Change-Id: I08b2f22c77f21376b998188da145c63c188befb9
Reviewed-on: https://chromium-review.googlesource.com/c/1430012
Commit-Queue: Friedrich [CET] <fhorschig@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Reviewed-by: David Trainor <dtrainor@chromium.org>
Cr-Commit-Position: refs/heads/master@{#626489}

chrome/android/java/res/layout/keyboard_accessory_suggestion_modern.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.ui.widget.ChipView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:gravity="center"
+    android:layout_height="wrap_content"
+    android:layout_width="wrap_content"
+    android:layout_marginEnd="@dimen/keyboard_accessory_half_padding"
+    android:layout_marginStart="@dimen/keyboard_accessory_half_padding"
+    android:layout_marginBottom="@dimen/keyboard_accessory_suggestion_top_bottom_margin"
+    android:layout_marginTop="@dimen/keyboard_accessory_suggestion_top_bottom_margin"
+    app:iconWidth="32dp"
+    style="@style/AssistiveChip" />

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

@@ -136,6 +136,7 @@
     <dimen name="keyboard_accessory_sheet_height">330dp</dimen>
     <dimen name="keyboard_accessory_sheet_padding">8dp</dimen>
     <dimen name="keyboard_accessory_suggestion_padding">16dp</dimen>
+    <dimen name="keyboard_accessory_suggestion_top_bottom_margin">8dp</dimen>
     <dimen name="keyboard_accessory_suggestion_offset">12dp</dimen>
     <dimen name="keyboard_accessory_suggestion_height">48dp</dimen>
     <dimen name="keyboard_accessory_suggestion_icon_size">20dp</dimen>

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/AccessorySheetView.java

@@ -4,6 +4,8 @@
 
 package org.chromium.chrome.browser.autofill.keyboard_accessory;
 
+import static org.chromium.ui.base.LocalizationUtils.isLayoutRtl;
+
 import android.content.Context;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
@@ -12,6 +14,8 @@ import android.view.View;
 import android.widget.FrameLayout;
 import android.widget.ImageView;
 
+import org.chromium.base.ApiCompatibilityUtils;
+
 /**
  * Displays the data provided by the {@link AccessorySheetViewBinder}.
  */
@@ -31,6 +35,10 @@ class AccessorySheetView extends FrameLayout {
         super.onFinishInflate();
         mViewPager = findViewById(org.chromium.chrome.R.id.keyboard_accessory_sheet);
         mTopShadow = findViewById(org.chromium.chrome.R.id.accessory_sheet_shadow);
+
+        // Ensure that sub components of the sheet use the RTL direction:
+        ApiCompatibilityUtils.setLayoutDirection(
+                mViewPager, isLayoutRtl() ? View.LAYOUT_DIRECTION_RTL : View.LAYOUT_DIRECTION_LTR);
     }
 
     void setAdapter(PagerAdapter adapter) {

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/KeyboardAccessoryModernViewBinder.java

@@ -14,6 +14,7 @@ import org.chromium.chrome.browser.autofill.keyboard_accessory.KeyboardAccessory
 import org.chromium.chrome.browser.autofill.keyboard_accessory.KeyboardAccessoryViewBinder.BarItemViewHolder;
 import org.chromium.ui.modelutil.PropertyKey;
 import org.chromium.ui.modelutil.PropertyModel;
+import org.chromium.ui.widget.ChipView;
 
 /**
  * Observes {@link KeyboardAccessoryProperties} changes (like a newly available tab) and triggers
@@ -23,8 +24,7 @@ class KeyboardAccessoryModernViewBinder {
     public static BarItemViewHolder create(ViewGroup parent, @BarItem.Type int viewType) {
         switch (viewType) {
             case BarItem.Type.SUGGESTION:
-                return new KeyboardAccessoryViewBinder.BarItemTextViewHolder(
-                        parent, R.layout.keyboard_accessory_suggestion);
+                return new BarItemChipViewHolder(parent);
             case BarItem.Type.TAB_SWITCHER:
                 return new TabItemViewHolder(parent);
             case BarItem.Type.ACTION_BUTTON: // Intentional fallthrough. Use legacy handling.
@@ -34,6 +34,20 @@ class KeyboardAccessoryModernViewBinder {
         return KeyboardAccessoryViewBinder.create(parent, viewType);
     }
 
+    static class BarItemChipViewHolder extends BarItemViewHolder<BarItem, ChipView> {
+        BarItemChipViewHolder(ViewGroup parent) {
+            super(parent, R.layout.keyboard_accessory_suggestion_modern);
+        }
+
+        @Override
+        protected void bind(BarItem item, ChipView chipView) {
+            KeyboardAccessoryData.Action action = item.getAction();
+            assert action != null : "Tried to bind item without action. Chose a wrong ViewHolder?";
+            chipView.getPrimaryTextView().setText(action.getCaption());
+            chipView.setOnClickListener(view -> action.getCallback().onResult(action));
+        }
+    }
+
     static class TabItemViewHolder
             extends BarItemViewHolder<BarItem, KeyboardAccessoryTabLayoutView> {
         private KeyboardAccessoryTabLayoutView mTabLayout;

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/KeyboardAccessoryViewBinder.java

@@ -75,7 +75,7 @@ class KeyboardAccessoryViewBinder {
         @Override
         public void bind(BarItem barItem, TextView textView) {
             KeyboardAccessoryData.Action action = barItem.getAction();
-            assert action != null : "";
+            assert action != null : "Tried to bind item without action. Chose a wrong ViewHolder?";
             textView.setText(action.getCaption());
             textView.setOnClickListener(view -> action.getCallback().onResult(action));
         }

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/PasswordAccessorySheetModernViewBinder.java

@@ -55,10 +55,10 @@ class PasswordAccessorySheetModernViewBinder {
         }
 
         void bindChipView(ChipView chip, KeyboardAccessoryData.UserInfo.Field field) {
-            chip.getInnerTextView().setTransformationMethod(
+            chip.getPrimaryTextView().setTransformationMethod(
                     field.isObfuscated() ? new PasswordTransformationMethod() : null);
-            chip.getInnerTextView().setText(field.getDisplayText());
-            chip.getInnerTextView().setContentDescription(field.getA11yDescription());
+            chip.getPrimaryTextView().setText(field.getDisplayText());
+            chip.getPrimaryTextView().setContentDescription(field.getA11yDescription());
             chip.setOnClickListener(!field.isSelectable() ? null : src -> field.triggerSelection());
             chip.setClickable(field.isSelectable());
             chip.setEnabled(field.isSelectable());

chrome/android/java/src/org/chromium/chrome/browser/download/home/filter/chips/ChipsViewHolder.java

@@ -46,8 +46,8 @@ public class ChipsViewHolder extends ViewHolder {
         getChipView().setEnabled(chip.enabled);
         getChipView().setSelected(chip.selected);
         getChipView().setOnClickListener(v -> chip.chipSelectedListener.run());
-        getChipView().getInnerTextView().setText(chip.text);
-        getChipView().setIcon(chip.icon);
-        getChipView().getInnerTextView().setContentDescription(chip.contentDescription);
+        getChipView().getPrimaryTextView().setText(chip.text);
+        getChipView().setIcon(chip.icon, true);
+        getChipView().getPrimaryTextView().setContentDescription(chip.contentDescription);
     }
 }

chrome/android/javatests/src/org/chromium/chrome/browser/autofill/keyboard_accessory/PasswordAccessorySheetModernViewTest.java

@@ -124,9 +124,10 @@ public class PasswordAccessorySheetModernViewTest {
 
         CriteriaHelper.pollUiThread(Criteria.equals(1, () -> mView.get().getChildCount()));
 
-        assertThat(getNameSuggestion().getInnerTextView().getText(), is("Name Suggestion"));
-        assertThat(getPasswordSuggestion().getInnerTextView().getText(), is("Password Suggestion"));
-        assertThat(getPasswordSuggestion().getInnerTextView().getTransformationMethod(),
+        assertThat(getNameSuggestion().getPrimaryTextView().getText(), is("Name Suggestion"));
+        assertThat(
+                getPasswordSuggestion().getPrimaryTextView().getText(), is("Password Suggestion"));
+        assertThat(getPasswordSuggestion().getPrimaryTextView().getTransformationMethod(),
                 instanceOf(PasswordTransformationMethod.class));
 
         ThreadUtils.runOnUiThreadBlocking(getNameSuggestion()::performClick);

ui/android/java/res/values-v17/styles.xml

@@ -67,17 +67,23 @@
         <item name="rippleColor">@color/chip_ripple_color</item>
     </style>
     <style name="SuggestionChip" parent="Chip" tools:ignore="UnusedResources">
+        <item name="primaryTextAppearance">@style/TextAppearance.ChipText</item>
         <item name="cornerRadius">@dimen/chip_corner_radius</item>
     </style>
     <style name="InputChip" parent="Chip" tools:ignore="UnusedResources">
+        <item name="primaryTextAppearance">@style/TextAppearance.ChipText</item>
+        <item name="cornerRadius">@dimen/chip_default_height</item>
+    </style>
+    <style name="AssistiveChip" parent="Chip" tools:ignore="UnusedResources">
+        <item name="primaryTextAppearance">@style/TextAppearance.ChipText.Assistive</item>
+        <item name="secondaryTextAppearance">@style/TextAppearance.ChipText.Assistive.Secondary</item>
         <item name="cornerRadius">@dimen/chip_default_height</item>
     </style>
 
     <style name="ChipTextView" tools:ignore="UnusedResources">
         <item name="android:gravity">center</item>
         <item name="android:maxLines">1</item>
-        <item name="android:paddingStart">@dimen/chip_icon_padding</item>
-        <item name="android:paddingEnd">@dimen/chip_no_icon_padding</item>
+        <item name="android:paddingStart">@dimen/chip_element_leading_padding</item>
         <item name="android:textAlignment">center</item>
     </style>
 
@@ -211,6 +217,14 @@
     </style>
 
     <!-- Chip Text Styles -->
+    <style name="TextAppearance.ChipText.Assistive" parent="TextAppearance.AccentMediumStyle">
+        <item name="android:textColor">@color/default_text_color</item>
+        <item name="android:textSize">@dimen/text_size_medium</item>
+    </style>
+    <style name="TextAppearance.ChipText.Assistive.Secondary" parent="TextAppearance.AccentMediumStyle">
+        <item name="android:textColor">@color/chip_text_color</item>
+        <item name="android:textSize">@dimen/text_size_medium</item>
+    </style>
     <style name="TextAppearance.ChipText" parent="TextAppearance.RobotoMediumStyle">
         <item name="android:textColor">@color/chip_text_color</item>
         <item name="android:textSize">@dimen/text_size_medium</item>

ui/android/java/res/values/attrs.xml

@@ -26,6 +26,8 @@
         <attr name="cornerRadius" format="reference|dimension"/>
         <attr name="iconWidth" format="reference|dimension"/>
         <attr name="iconHeight" format="reference|dimension"/>
+        <attr name="primaryTextAppearance" format="reference"/>
+        <attr name="secondaryTextAppearance" format="reference"/>
         <attr name="rippleColor" format="color"/>
     </declare-styleable>
 

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

@@ -27,8 +27,8 @@
     <dimen name="chip_border_width">1dp</dimen>
     <dimen name="chip_corner_radius">8dp</dimen>
     <dimen name="chip_default_height">32dp</dimen>
-    <dimen name="chip_no_icon_padding">16dp</dimen>
-    <dimen name="chip_icon_padding">8dp</dimen>
+    <dimen name="chip_end_padding">16dp</dimen>
+    <dimen name="chip_element_leading_padding">8dp</dimen>
     <item name="chip_background_selected_focused_alpha" format="float" type="dimen">0.12</item>
     <item name="chip_background_selected_alpha" format="float" type="dimen">0.06</item>
     <dimen name="chip_icon_size">20dp</dimen>

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

@@ -4,11 +4,11 @@
 package org.chromium.ui.widget;
 
 import android.content.Context;
-import android.content.res.ColorStateList;
 import android.content.res.TypedArray;
 import android.support.annotation.DrawableRes;
+import android.support.annotation.IdRes;
+import android.support.annotation.Px;
 import android.support.annotation.StyleRes;
-import android.support.v4.view.MarginLayoutParamsCompat;
 import android.support.v4.view.ViewCompat;
 import android.util.AttributeSet;
 import android.view.ContextThemeWrapper;
@@ -21,14 +21,15 @@ import org.chromium.ui.R;
 
 /** The view responsible for displaying a material chip. */
 public class ChipView extends LinearLayout {
-    /** An id to use for {@link #setIcon(int)} when there is no icon on the chip. */
+    /** An id to use for {@link #setIcon(int, boolean)} when there is no icon on the chip. */
     public static final int INVALID_ICON_ID = -1;
-    private final int mTextStartPaddingWithIconPx;
-    private final int mTextStartPaddingWithNoIconPx;
 
     private final RippleBackgroundHelper mRippleBackgroundHelper;
-    private final TextView mText;
+    private final TextView mPrimaryText;
     private final ChromeImageView mIcon;
+    private final @IdRes int mSecondaryTextAppearanceId;
+
+    private TextView mSecondaryText;
 
     /**
      * Constructor for inflating from XML.
@@ -47,10 +48,9 @@ public class ChipView extends LinearLayout {
     private ChipView(Context context, AttributeSet attrs, @StyleRes int themeOverlay) {
         super(new ContextThemeWrapper(context, themeOverlay), attrs, R.attr.chipStyle);
 
-        mTextStartPaddingWithIconPx =
-                getResources().getDimensionPixelSize(R.dimen.chip_icon_padding);
-        mTextStartPaddingWithNoIconPx =
-                getResources().getDimensionPixelSize(R.dimen.chip_no_icon_padding);
+        final @Px int leadingElementPadding =
+                getResources().getDimensionPixelSize(R.dimen.chip_element_leading_padding);
+        final @Px int endPadding = getResources().getDimensionPixelSize(R.dimen.chip_end_padding);
 
         TypedArray a = getContext().obtainStyledAttributes(
                 attrs, R.styleable.ChipView, R.attr.chipStyle, 0);
@@ -64,25 +64,28 @@ public class ChipView extends LinearLayout {
                 getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
         int iconHeight = a.getDimensionPixelSize(R.styleable.ChipView_iconHeight,
                 getResources().getDimensionPixelSize(R.dimen.chip_icon_size));
+        int primaryTextAppearance = a.getResourceId(
+                R.styleable.ChipView_primaryTextAppearance, R.style.TextAppearance_ChipText);
+        mSecondaryTextAppearanceId = a.getResourceId(
+                R.styleable.ChipView_secondaryTextAppearance, R.style.TextAppearance_ChipText);
         a.recycle();
 
         mIcon = new ChromeImageView(getContext());
-        LayoutParams lp = new LayoutParams(iconWidth, iconHeight);
-        MarginLayoutParamsCompat.setMarginStart(lp, mTextStartPaddingWithIconPx);
-        mIcon.setLayoutParams(lp);
+        mIcon.setLayoutParams(new LayoutParams(iconWidth, iconHeight));
         addView(mIcon);
 
-        mText = new TextView(new ContextThemeWrapper(getContext(), R.style.ChipTextView));
-        ApiCompatibilityUtils.setTextAppearance(mText, R.style.TextAppearance_ChipText);
-        addView(mText);
+        // Setting this enforces 16dp padding at the end and 8dp at the start. For text, the start
+        // padding needs to be 16dp which is why a ChipTextView contributes the remaining 8dp.
+        ViewCompat.setPaddingRelative(this, leadingElementPadding, 0, endPadding, 0);
+
+        mPrimaryText = new TextView(new ContextThemeWrapper(getContext(), R.style.ChipTextView));
+        ApiCompatibilityUtils.setTextAppearance(mPrimaryText, primaryTextAppearance);
+        addView(mPrimaryText);
 
         // Reset icon and background:
         mRippleBackgroundHelper = new RippleBackgroundHelper(this, chipColorId, rippleColorId,
                 cornerRadius, R.color.chip_stroke_color, R.dimen.chip_border_width);
-        setIcon(INVALID_ICON_ID);
-
-        ColorStateList textColors = mText.getTextColors();
-        if (textColors != null) ApiCompatibilityUtils.setImageTintList(mIcon, textColors);
+        setIcon(INVALID_ICON_ID, false);
     }
 
     @Override
@@ -97,26 +100,38 @@ public class ChipView extends LinearLayout {
      * Sets the icon at the start of the chip view.
      * @param icon The resource id pointing to the icon.
      */
-    public void setIcon(@DrawableRes int icon) {
-        final int textStartPadding;
+    public void setIcon(@DrawableRes int icon, boolean tintWithTextColor) {
         if (icon == INVALID_ICON_ID) {
             mIcon.setVisibility(ViewGroup.GONE);
-            textStartPadding = mTextStartPaddingWithNoIconPx;
-        } else {
-            textStartPadding = mTextStartPaddingWithIconPx;
-            mIcon.setVisibility(ViewGroup.VISIBLE);
-            mIcon.setImageResource(icon);
+            return;
+        }
+        mIcon.setVisibility(ViewGroup.VISIBLE);
+        mIcon.setImageResource(icon);
+        if (mPrimaryText.getTextColors() != null && tintWithTextColor) {
+            ApiCompatibilityUtils.setImageTintList(mIcon, mPrimaryText.getTextColors());
         }
-
-        ViewCompat.setPaddingRelative(mText, textStartPadding, mText.getPaddingTop(),
-                ViewCompat.getPaddingEnd(mText), mText.getPaddingBottom());
     }
 
     /**
      * Returns the {@link TextView} that contains the label of the chip.
      * @return A {@link TextView}.
      */
-    public TextView getInnerTextView() {
-        return mText;
+    public TextView getPrimaryTextView() {
+        return mPrimaryText;
+    }
+
+    /**
+     * Returns the {@link TextView} that contains the secondary label of the chip. If it wasn't used
+     * until now, this creates the view.
+     * @return A {@link TextView}.
+     */
+    public TextView getSecondaryTextView() {
+        if (mSecondaryText == null) {
+            mSecondaryText =
+                    new TextView(new ContextThemeWrapper(getContext(), R.style.ChipTextView));
+            ApiCompatibilityUtils.setTextAppearance(mSecondaryText, mSecondaryTextAppearanceId);
+            addView(mSecondaryText);
+        }
+        return mSecondaryText;
     }
 }

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

@@ -19,6 +19,7 @@ import android.support.annotation.Nullable;
 import android.support.annotation.Px;
 import android.support.v4.graphics.ColorUtils;
 import android.support.v4.graphics.drawable.DrawableCompat;
+import android.support.v4.view.ViewCompat;
 import android.support.v7.content.res.AppCompatResources;
 import android.util.StateSet;
 import android.view.View;
@@ -71,9 +72,9 @@ class RippleBackgroundHelper {
             @DimenRes int borderSizeDimenId) {
         mView = view;
 
-        int paddingLeft = mView.getPaddingLeft();
+        int paddingStart = ViewCompat.getPaddingStart(mView);
         int paddingTop = mView.getPaddingTop();
-        int paddingRight = mView.getPaddingRight();
+        int paddingEnd = ViewCompat.getPaddingEnd(mView);
         int paddingBottom = mView.getPaddingBottom();
         mView.setBackground(createBackgroundDrawable(
                 AppCompatResources.getColorStateList(view.getContext(), rippleColorResId),
@@ -85,7 +86,8 @@ class RippleBackgroundHelper {
         // On KitKat, setting the background on the view can cause padding reset. Save the padding
         // and re-apply after background is set.
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
-            mView.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
+            ViewCompat.setPaddingRelative(
+                    mView, paddingStart, paddingTop, paddingEnd, paddingBottom);
         }
     }