[Autofill Assistant] Group multiple details together.

This CL merges multiple details into a single block, with the details
separated by a line. See b/174652960#comment16 for screenshots.

Bug: b/174652960
Change-Id: Ia562ec600b513a120b503c8f7ffa676124089749
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611096
Commit-Queue: Jordan Demeulenaere <jdemeulenaere@chromium.org>
Reviewed-by: Clemens Arbesser <arbesser@google.com>
Cr-Commit-Position: refs/heads/master@{#842612}

chrome/android/features/autofill_assistant/BUILD.gn

@@ -357,6 +357,7 @@ android_resources("java_resources") {
     "java/res/drawable/autofill_assistant_circle_background.xml",
     "java/res/drawable/autofill_assistant_default_details.xml",
     "java/res/drawable/autofill_assistant_details_bg.xml",
+    "java/res/drawable/autofill_assistant_details_list_divider.xml",
     "java/res/drawable/autofill_assistant_lightblue_rect_bg.xml",
     "java/res/drawable/autofill_assistant_rounded_corner_background.xml",
     "java/res/drawable/autofill_assistant_swipe_indicator.xml",

chrome/android/features/autofill_assistant/java/res/drawable/autofill_assistant_details_bg.xml

@@ -7,6 +7,6 @@
     android:shape="rectangle">
   <corners android:radius="8dp" />
   <stroke
-      android:color="@color/default_chip_outline_color"
+      android:color="@color/autofill_assistant_details_divider_color"
       android:width="1dp" />
 </shape>

chrome/android/features/autofill_assistant/java/res/drawable/autofill_assistant_details_list_divider.xml

+<!-- Copyright 2021 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. -->
+<shape
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <size android:height="1dp" />
+    <solid android:color="@color/autofill_assistant_details_divider_color" />
+</shape>
\ No newline at end of file

chrome/android/features/autofill_assistant/java/res/layout/autofill_assistant_details.xml

@@ -7,8 +7,6 @@
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="@dimen/autofill_assistant_bottombar_vertical_spacing"
-    android:background="@drawable/autofill_assistant_details_bg"
     android:padding="16dp"
     android:orientation="vertical">
     <LinearLayout android:layout_width="match_parent"

chrome/android/features/autofill_assistant/java/res/values-v17/colors.xml

@@ -11,4 +11,5 @@
     -->
     <color name="autofill_assistant_light_blue">@color/modern_blue_600_alpha_10</color>
     <color name="autofill_assistant_actions_shadow_color">@color/modern_grey_100</color>
+    <color name="autofill_assistant_details_divider_color">@color/default_chip_outline_color</color>
 </resources>

chrome/android/features/autofill_assistant/java/src/org/chromium/chrome/browser/autofill_assistant/AssistantBottomBarCoordinator.java

@@ -187,6 +187,7 @@ class AssistantBottomBarCoordinator implements AssistantPeekHeightCoordinator.De
         // Set children top margins to have a spacing between them.
         int childSpacing = activity.getResources().getDimensionPixelSize(
                 R.dimen.autofill_assistant_bottombar_vertical_spacing);
+        setChildMarginTop(mDetailsCoordinator.getView(), childSpacing);
         setChildMarginTop(mPaymentRequestCoordinator.getView(), childSpacing);
         setChildMarginTop(mFormCoordinator.getView(), childSpacing);
         setChildMarginTop(mGenericUiCoordinator.getView(), childSpacing);

chrome/android/features/autofill_assistant/java/src/org/chromium/chrome/browser/autofill_assistant/details/AssistantDetailsCoordinator.java

@@ -5,11 +5,17 @@
 package org.chromium.chrome.browser.autofill_assistant.details;
 
 import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Rect;
+import android.graphics.drawable.Drawable;
+import android.view.View;
 import android.view.ViewGroup;
 
+import androidx.appcompat.content.res.AppCompatResources;
 import androidx.recyclerview.widget.LinearLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;
 
+import org.chromium.chrome.autofill_assistant.R;
 import org.chromium.chrome.browser.image_fetcher.ImageFetcher;
 
 /**
@@ -25,6 +31,8 @@ public class AssistantDetailsCoordinator {
                 ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
         mView.setLayoutManager(new LinearLayoutManager(
                 context, LinearLayoutManager.VERTICAL, /* reverseLayout= */ false));
+        mView.setBackgroundResource(R.drawable.autofill_assistant_details_bg);
+        mView.addItemDecoration(new DetailsItemDecoration(context));
         AssistantDetailsAdapter adapter = new AssistantDetailsAdapter(context, imageFetcher);
         mView.setAdapter(adapter);
 
@@ -34,9 +42,52 @@ public class AssistantDetailsCoordinator {
                 adapter.setDetails(model.get(AssistantDetailsModel.DETAILS));
             }
         });
+
+        // Observe the details and make this coordinator's view visible only if the details contain
+        // at least one item. That way its margins (set by the AssistantBottomBar Coordinator) will
+        // be considered during layout only if there is at least one details to show.
+        mView.setVisibility(View.GONE);
+        model.addObserver((source, propertyKey) -> {
+            if (propertyKey == AssistantDetailsModel.DETAILS) {
+                int visibility = model.get(AssistantDetailsModel.DETAILS).size() > 0 ? View.VISIBLE
+                                                                                     : View.GONE;
+                if (mView.getVisibility() != visibility) {
+                    mView.setVisibility(visibility);
+                }
+            }
+        });
     }
 
     public RecyclerView getView() {
         return mView;
     }
+
+    /** A divider that is drawn after each details, except the last one. */
+    private static class DetailsItemDecoration extends RecyclerView.ItemDecoration {
+        private final Drawable mDrawable;
+        private final Rect mBounds = new Rect();
+
+        public DetailsItemDecoration(Context context) {
+            mDrawable = AppCompatResources.getDrawable(
+                    context, R.drawable.autofill_assistant_details_list_divider);
+        }
+
+        @Override
+        public void onDrawOver(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
+            // Note: this implementation is inspired from DividerItemDecoration#drawVertical.
+            int left = parent.getPaddingLeft();
+            int right = parent.getWidth() - parent.getPaddingRight();
+            int childCount = parent.getChildCount();
+
+            // Draw a divider after each child, except the last one.
+            for (int i = 0; i < childCount - 1; ++i) {
+                View child = parent.getChildAt(i);
+                parent.getDecoratedBoundsWithMargins(child, this.mBounds);
+                int bottom = this.mBounds.bottom + Math.round(child.getTranslationY());
+                int top = bottom - this.mDrawable.getIntrinsicHeight();
+                this.mDrawable.setBounds(left, top, right, bottom);
+                this.mDrawable.draw(canvas);
+            }
+        }
+    }
 }