[Autofill Assistant] Fix the size of bottom bar + animations.

This CL sets the different margins and paddings such that the bottom bar
has a fixed size most of the time.

Change-Id: I2bcd51c0badcb7d09f029fc823f7eb725c167978
Reviewed-on: https://chromium-review.googlesource.com/c/1319671
Commit-Queue: Jordan Demeulenaere <jdemeulenaere@chromium.org>
Reviewed-by: Mathias Carlen <mcarlen@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#606507}

chrome/android/java/res_autofill_assistant/layout/autofill_assistant_sheet.xml

@@ -88,10 +88,6 @@
             android:id="@+id/details"
             android:layout_width="match_parent"
             android:layout_height="64dp"
-            android:layout_marginTop="20dp"
-            android:layout_marginStart="24dp"
-            android:layout_marginEnd="24dp"
-            android:layout_marginBottom="20dp"
             android:background="@drawable/autofill_assistant_details_bg"
             android:padding="8dp"
             android:visibility="gone"
@@ -135,7 +131,6 @@
             android:id="@+id/carousel_scroll"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:animateLayoutChanges="true"
             android:scrollbars="none">
             <LinearLayout
                 android:id="@+id/carousel"

chrome/android/java/src/org/chromium/chrome/browser/autofill_assistant/AutofillAssistantUiDelegate.java

@@ -11,6 +11,8 @@ import android.media.ThumbnailUtils;
 import android.support.annotation.Nullable;
 import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
 import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
+import android.support.v4.text.TextUtilsCompat;
+import android.support.v4.view.ViewCompat;
 import android.support.v7.content.res.AppCompatResources;
 import android.text.TextUtils;
 import android.util.TypedValue;
@@ -28,6 +30,7 @@ import org.chromium.chrome.autofill_assistant.R;
 import org.chromium.chrome.browser.ChromeActivity;
 import org.chromium.chrome.browser.autofill.PersonalDataManager.AutofillProfile;
 import org.chromium.chrome.browser.autofill.PersonalDataManager.CreditCard;
+import org.chromium.chrome.browser.autofill_assistant.ui.BottomBarAnimations;
 import org.chromium.chrome.browser.cached_image_fetcher.CachedImageFetcher;
 import org.chromium.chrome.browser.help.HelpAndFeedback;
 import org.chromium.chrome.browser.profiles.Profile;
@@ -37,6 +40,7 @@ import org.chromium.components.variations.VariationsAssociatedData;
 
 import java.text.SimpleDateFormat;
 import java.util.ArrayList;
+import java.util.Collections;
 import java.util.Date;
 import java.util.List;
 import java.util.Locale;
@@ -71,6 +75,9 @@ class AutofillAssistantUiDelegate {
     private final int mDetailsImageWidth;
     private final int mDetailsImageHeight;
 
+    private final BottomBarAnimations mBottomBarAnimations;
+    private final boolean mIsRightToLeftLayout;
+
     /**
      * This is a client interface that relays interactions from the UI.
      *
@@ -244,7 +251,10 @@ class AutofillAssistantUiDelegate {
         mDetailsImageHeight = mActivity.getResources().getDimensionPixelSize(
                 R.dimen.autofill_assistant_details_image_size);
 
-        setCarouselTopPadding();
+        mBottomBarAnimations = new BottomBarAnimations(mBottomBar, mDetails, mChipsViewContainer,
+                mActivity.getResources().getDisplayMetrics());
+        mIsRightToLeftLayout = TextUtilsCompat.getLayoutDirectionFromLocale(Locale.getDefault())
+                == ViewCompat.LAYOUT_DIRECTION_RTL;
 
         // Finch experiment to adjust overlay color
         String overlayColor = VariationsAssociatedData.getVariationParamValue(
@@ -276,33 +286,27 @@ class AutofillAssistantUiDelegate {
      * @param scriptHandles List of scripts to show.
      */
     public void updateScripts(ArrayList<ScriptHandle> scriptHandles) {
-        clearChipsViewContainer();
-
         if (scriptHandles.isEmpty()) {
+            clearCarousel();
             return;
         }
 
-        boolean hasHighlightedScript = hasHighlightedScript(scriptHandles);
+        boolean alignRight = hasHighlightedScript(scriptHandles);
         ChipStyle nonHighlightStyle =
-                hasHighlightedScript ? ChipStyle.BUTTON_HAIRLINE : ChipStyle.CHIP_ASSISTIVE;
-
+                alignRight ? ChipStyle.BUTTON_HAIRLINE : ChipStyle.CHIP_ASSISTIVE;
+        ArrayList<View> childViews = new ArrayList<>();
         for (int i = 0; i < scriptHandles.size(); i++) {
-            // Add scripts in reverse order if the chips are right aligned.
-            int j = hasHighlightedScript ? scriptHandles.size() - i - 1 : i;
-            ScriptHandle scriptHandle = scriptHandles.get(j);
+            ScriptHandle scriptHandle = scriptHandles.get(i);
             ChipStyle chipStyle =
                     scriptHandle.isHighlight() ? ChipStyle.BUTTON_FILLED : nonHighlightStyle;
             TextView chipView = createChipView(scriptHandle.getName(), chipStyle);
             chipView.setOnClickListener((unusedView) -> {
-                clearChipsViewContainer();
+                clearCarousel();
                 mClient.onScriptSelected(scriptHandle.getPath());
             });
-
-            addChipViewToContainer(chipView);
+            childViews.add(chipView);
         }
-
-        setChipViewContainerGravity(hasHighlightedScript);
-        show();
+        setCarouselChildViews(childViews, alignRight);
     }
 
     private boolean hasHighlightedScript(ArrayList<ScriptHandle> scripts) {
@@ -314,7 +318,47 @@ class AutofillAssistantUiDelegate {
         return false;
     }
 
-    private void setChipViewContainerGravity(boolean alignRight) {
+    private void clearCarousel() {
+        setCarouselChildViews(Collections.emptyList(), /* alignRight= */ false);
+    }
+
+    private void setCarouselChildViews(List<View> children, boolean alignRight) {
+        // TODO(crbug.com/806868): Pull the carousel logic into its own MVC component.
+
+        // Reverse alignRight if we are in a RTL layout.
+        alignRight = mIsRightToLeftLayout ? !alignRight : alignRight;
+
+        // Replace children.
+        // TODO(crbug.com/806868): We might want to animate children change using fade in/out
+        // animations.
+        mChipsViewContainer.removeAllViews();
+        setCarouselAlignment(alignRight);
+        for (int i = 0; i < children.size(); i++) {
+            // Add children in reverse order if the chips are right aligned.
+            int j = alignRight ? children.size() - i - 1 : i;
+            View child = children.get(j);
+            if (i > 0) {
+                LinearLayout.LayoutParams layoutParams =
+                        (LinearLayout.LayoutParams) child.getLayoutParams();
+                int leftMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16,
+                        child.getContext().getResources().getDisplayMetrics());
+                layoutParams.setMargins(leftMargin, 0, 0, 0);
+                child.setLayoutParams(layoutParams);
+            }
+            mChipsViewContainer.addView(child);
+        }
+
+        if (children.isEmpty()) {
+            mBottomBarAnimations.hideCarousel();
+        } else {
+            // Make sure the Autofill Assistant is visible.
+            show();
+            mBottomBarAnimations.showCarousel();
+        }
+    }
+
+    private void setCarouselAlignment(boolean alignRight) {
+        // Set carousel scroll gravity.
         ViewGroup.LayoutParams currentLayoutParams = mCarouselScroll.getLayoutParams();
         LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(currentLayoutParams);
         layoutParams.gravity = alignRight ? Gravity.END : Gravity.START;
@@ -325,21 +369,6 @@ class AutofillAssistantUiDelegate {
                 () -> mCarouselScroll.fullScroll(alignRight ? View.FOCUS_RIGHT : View.FOCUS_LEFT));
     }
 
-    private void addChipViewToContainer(TextView newChild) {
-        // Add a left margin if it's not the first child.
-        if (mChipsViewContainer.getChildCount() > 0) {
-            LinearLayout.LayoutParams layoutParams =
-                    new LinearLayout.LayoutParams(newChild.getLayoutParams());
-            int leftMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16,
-                    newChild.getContext().getResources().getDisplayMetrics());
-            layoutParams.setMargins(leftMargin, 0, 0, 0);
-            newChild.setLayoutParams(layoutParams);
-        }
-
-        mChipsViewContainer.addView(newChild);
-        mChipsViewContainer.setVisibility(View.VISIBLE);
-    }
-
     private TextView createChipView(String text, ChipStyle style) {
         int resId = -1;
         switch (style) {
@@ -361,7 +390,7 @@ class AutofillAssistantUiDelegate {
     }
 
     public void show() {
-        if (!mFullContainer.isShown()) {
+        if (mFullContainer.getVisibility() != View.VISIBLE) {
             mFullContainer.setVisibility(View.VISIBLE);
 
             // Set the initial progress. It is OK to make multiple calls to this method as it will
@@ -403,7 +432,7 @@ class AutofillAssistantUiDelegate {
         mBottomBar.findViewById(R.id.feedback_button).setVisibility(View.GONE);
         hideProgressBar();
         hideDetails();
-        hideChipsViewContainer();
+        mBottomBarAnimations.hideCarousel();
     }
 
     /** Called to show overlay. */
@@ -421,8 +450,7 @@ class AutofillAssistantUiDelegate {
     }
 
     public void hideDetails() {
-        mDetails.setVisibility(View.GONE);
-        setCarouselTopPadding();
+        mBottomBarAnimations.hideDetails();
     }
 
     /** Called to show contextual information. */
@@ -440,10 +468,6 @@ class AutofillAssistantUiDelegate {
         }
 
         mDetailsImage.setVisibility(View.GONE);
-        mDetails.setVisibility(View.VISIBLE);
-        setCarouselTopPadding();
-        show();
-
         String url = details.getUrl();
         if (!url.isEmpty()) {
             // The URL is safe given because it comes from the knowledge graph and is hosted on
@@ -459,16 +483,10 @@ class AutofillAssistantUiDelegate {
                     mActivity, R.drawable.autofill_assistant_default_details));
             mDetailsImage.setVisibility(View.VISIBLE);
         }
-    }
 
-    private void setCarouselTopPadding() {
-        int topPadding = 0;
-        if (mDetails.getVisibility() != View.VISIBLE) {
-            topPadding = (int) TypedValue.applyDimension(
-                    TypedValue.COMPLEX_UNIT_DIP, 16, mActivity.getResources().getDisplayMetrics());
-        }
-        mChipsViewContainer.setPadding(mChipsViewContainer.getPaddingLeft(), topPadding,
-                mChipsViewContainer.getPaddingRight(), mChipsViewContainer.getPaddingBottom());
+        // Make sure the Autofill Assistant is visible.
+        show();
+        mBottomBarAnimations.showDetails();
     }
 
     private String getDetailsText(Details details) {
@@ -526,35 +544,24 @@ class AutofillAssistantUiDelegate {
      */
     public void showProfiles(ArrayList<AutofillProfile> profiles) {
         if (profiles.isEmpty()) {
+            clearCarousel();
             mClient.onAddressSelected("");
             return;
         }
 
-        clearChipsViewContainer();
-
+        ArrayList<View> childViews = new ArrayList<>();
         for (int i = 0; i < profiles.size(); i++) {
             AutofillProfile profile = profiles.get(i);
             // TODO(crbug.com/806868): Show more information than the street.
             TextView chipView =
                     createChipView(profile.getStreetAddress(), ChipStyle.CHIP_ASSISTIVE);
             chipView.setOnClickListener((unusedView) -> {
-                clearChipsViewContainer();
+                clearCarousel();
                 mClient.onAddressSelected(profile.getGUID());
             });
-            addChipViewToContainer(chipView);
+            childViews.add(chipView);
         }
-
-        setChipViewContainerGravity(false);
-        show();
-    }
-
-    private void clearChipsViewContainer() {
-        mChipsViewContainer.removeAllViews();
-        hideChipsViewContainer();
-    }
-
-    private void hideChipsViewContainer() {
-        mChipsViewContainer.setVisibility(View.GONE);
+        setCarouselChildViews(childViews, /* alignRight= */ false);
     }
 
     /**
@@ -568,22 +575,19 @@ class AutofillAssistantUiDelegate {
             return;
         }
 
-        clearChipsViewContainer();
-
+        ArrayList<View> childViews = new ArrayList<>();
         for (int i = 0; i < cards.size(); i++) {
             CreditCard card = cards.get(i);
             // TODO(crbug.com/806868): Show more information than the card number.
             TextView chipView =
                     createChipView(card.getObfuscatedNumber(), ChipStyle.CHIP_ASSISTIVE);
             chipView.setOnClickListener((unusedView) -> {
-                clearChipsViewContainer();
+                clearCarousel();
                 mClient.onCardSelected(card.getGUID());
             });
-            addChipViewToContainer(chipView);
+            childViews.add(chipView);
         }
-
-        setChipViewContainerGravity(false);
-        show();
+        setCarouselChildViews(childViews, /* alignRight= */ false);
     }
 
     /**

chrome/android/java/src/org/chromium/chrome/browser/autofill_assistant/ui/BottomBarAnimations.java

+// Copyright 2018 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.autofill_assistant.ui;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.ValueAnimator;
+import android.util.DisplayMetrics;
+import android.util.TypedValue;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
+
+import org.chromium.base.Callback;
+import org.chromium.chrome.browser.compositor.layouts.ChromeAnimation;
+
+/**
+ * Wrapper around the different {@code AutofillAssistantUiDelegate} views to animate between states.
+ */
+public class BottomBarAnimations {
+    private static final int DETAILS_SLIDE_ANIMATION_SPEED_MS = 200;
+    private static final int CAROUSEL_FADE_ANIMATION_SPEED_MS = 100;
+
+    private static final int BOTTOM_BAR_WITH_DETAILS_HEIGHT_DP = 234;
+    private static final int DETAILS_HORIZONTAL_MARGIN_DP = 24;
+    private static final int DETAILS_VERTICAL_MARGIN_WITH_CAROUSEL_DP = 20;
+    private static final int DETAILS_VERTICAL_MARGIN_WITHOUT_CAROUSEL_DP = 46;
+    private static final int CAROUSEL_TOP_PADDING_WITHOUT_DETAILS_DP = 16;
+
+    private final View mBottomBarView;
+    private final View mDetailsView;
+    private final View mCarouselView;
+
+    // Dimensions in device pixels.
+    private final int mBottomBarWithDetailsHeight;
+    private final int mDetailsHorizontalMargin;
+    private final int mDetailsVerticalMarginWithCarousel;
+    private final int mDetailsVerticalMarginWithoutCarousel;
+    private final int mCarouselTopPaddingWithoutDetails;
+
+    private ValueAnimator mCurrentDetailsAnimation;
+
+    public BottomBarAnimations(View bottomBarView, View detailsView, View carouselView,
+            DisplayMetrics displayMetrics) {
+        mBottomBarView = bottomBarView;
+        mDetailsView = detailsView;
+        mCarouselView = carouselView;
+
+        mBottomBarWithDetailsHeight = (int) TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP, BOTTOM_BAR_WITH_DETAILS_HEIGHT_DP, displayMetrics);
+        mDetailsHorizontalMargin = (int) TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP, DETAILS_HORIZONTAL_MARGIN_DP, displayMetrics);
+        mDetailsVerticalMarginWithCarousel =
+                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
+                        DETAILS_VERTICAL_MARGIN_WITH_CAROUSEL_DP, displayMetrics);
+        mDetailsVerticalMarginWithoutCarousel =
+                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
+                        DETAILS_VERTICAL_MARGIN_WITHOUT_CAROUSEL_DP, displayMetrics);
+        mCarouselTopPaddingWithoutDetails =
+                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
+                        CAROUSEL_TOP_PADDING_WITHOUT_DETAILS_DP, displayMetrics);
+
+        // Initialize the margins and paddings.
+        setCarouselPaddings();
+        setDetailsMargins(mDetailsVerticalMarginWithoutCarousel);
+    }
+
+    /**
+     * Show the carousel. This method does nothing if the carousel is already shown.
+     */
+    public void showCarousel() {
+        if (mCarouselView.getVisibility() == View.VISIBLE) {
+            return;
+        }
+
+        mCarouselView.setVisibility(View.VISIBLE);
+
+        if (mDetailsView.getVisibility() != View.VISIBLE) {
+            animateCarouselAlpha(1.0f, ignoredResult -> {});
+            return;
+        }
+
+        // Slide details to the top.
+        animateDetailsVerticalMargin(mDetailsVerticalMarginWithCarousel, (success) -> {
+            // If details animation was cancelled, we don't do anything.
+            if (success) {
+                animateCarouselAlpha(1.0f, ignoredResult -> {});
+            }
+        });
+    }
+
+    /**
+     * Show the carousel. This method does nothing if the carousel is already hidden.
+     */
+    public void hideCarousel() {
+        if (mCarouselView.getVisibility() != View.VISIBLE) {
+            return;
+        }
+
+        animateCarouselAlpha(0f, (success) -> {
+            // Slide details to the middle of the bottom bar if carousel animation was not
+            // cancelled.
+            if (success) {
+                mCarouselView.setVisibility(View.GONE);
+
+                if (mDetailsView.getVisibility() == View.VISIBLE) {
+                    animateDetailsVerticalMargin(
+                            mDetailsVerticalMarginWithoutCarousel, ignoredResult -> {});
+                }
+            }
+        });
+    }
+
+    /**
+     * Show the details. This method does nothing if the details are already shown.
+     */
+    public void showDetails() {
+        if (mDetailsView.getVisibility() == View.VISIBLE) {
+            return;
+        }
+
+        // TODO(crbug.com/806868): The bottom bar will be animated when its height changes, but
+        // maybe we want to also animate the details appearance. In practice, most of the time the
+        // details are shown when running a script, i.e. when no chips is currently shown, which
+        // means the details will slide alongside the bottom bar.
+        mDetailsView.setVisibility(View.VISIBLE);
+        setBottomBarHeight(mBottomBarWithDetailsHeight);
+        setCarouselPaddings();
+    }
+
+    /**
+     * Show the details. This method does nothing if the details are already hidden.
+     */
+    public void hideDetails() {
+        if (mDetailsView.getVisibility() != View.VISIBLE) {
+            return;
+        }
+
+        mDetailsView.setVisibility(View.GONE);
+        setCarouselPaddings();
+        setBottomBarHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
+    }
+
+    private void setBottomBarHeight(int targetHeight) {
+        FrameLayout.LayoutParams layoutParams =
+                (FrameLayout.LayoutParams) mBottomBarView.getLayoutParams();
+        layoutParams.height = targetHeight;
+        mBottomBarView.setLayoutParams(layoutParams);
+    }
+
+    /**
+     * Animate the carousel opacity from current value to {@code targetOpacity}. Calls {@code
+     * onAnimationEnd} with true if the animation finished successfully, false if it was cancelled.
+     */
+    private void animateCarouselAlpha(float targetOpacity, Callback<Boolean> onAnimationEnd) {
+        float currentOpacity = mCarouselView.getAlpha();
+        mCarouselView.animate()
+                .alpha(targetOpacity)
+                .setDuration((int) (CAROUSEL_FADE_ANIMATION_SPEED_MS
+                        * Math.abs(targetOpacity - currentOpacity)))
+                .setListener(new AnimatorListenerAdapter() {
+                    @Override
+                    public void onAnimationEnd(Animator animation) {
+                        onAnimationEnd.onResult(true);
+                    }
+
+                    @Override
+                    public void onAnimationCancel(Animator animation) {
+                        onAnimationEnd.onResult(false);
+                    }
+                })
+                .setInterpolator(ChromeAnimation.getLinearInterpolator())
+                .start();
+    }
+
+    /**
+     * Animate the details vertical margin from current value to {@code targetMargin}. Calls {@code
+     * onAnimationEnd} with true if the animation finished successfully, false if it was cancelled.
+     */
+    private void animateDetailsVerticalMargin(
+            int targetVerticalMargin, Callback<Boolean> onAnimationEnd) {
+        if (mCurrentDetailsAnimation != null) {
+            mCurrentDetailsAnimation.cancel();
+        }
+
+        int currentVerticalMargin =
+                ((LinearLayout.LayoutParams) mDetailsView.getLayoutParams()).topMargin;
+
+        mCurrentDetailsAnimation =
+                ValueAnimator.ofInt(currentVerticalMargin, targetVerticalMargin)
+                        .setDuration(DETAILS_SLIDE_ANIMATION_SPEED_MS
+                                * Math.abs(currentVerticalMargin - targetVerticalMargin)
+                                / (mDetailsVerticalMarginWithoutCarousel
+                                          - mDetailsVerticalMarginWithCarousel));
+        mCurrentDetailsAnimation.setInterpolator(ChromeAnimation.getDecelerateInterpolator());
+        mCurrentDetailsAnimation.addListener(new AnimatorListenerAdapter() {
+            @Override
+            public void onAnimationEnd(Animator animation, boolean isReverse) {
+                mCurrentDetailsAnimation = null;
+                onAnimationEnd.onResult(true);
+            }
+
+            @Override
+            public void onAnimationCancel(Animator animation) {
+                mCurrentDetailsAnimation = null;
+                onAnimationEnd.onResult(false);
+            }
+        });
+        mCurrentDetailsAnimation.addUpdateListener(
+                animation -> setDetailsMargins((int) animation.getAnimatedValue()));
+        mCurrentDetailsAnimation.start();
+    }
+
+    private void setDetailsMargins(int verticalMargin) {
+        LinearLayout.LayoutParams layoutParams =
+                (LinearLayout.LayoutParams) mDetailsView.getLayoutParams();
+        layoutParams.setMargins(
+                mDetailsHorizontalMargin, verticalMargin, mDetailsHorizontalMargin, verticalMargin);
+        mDetailsView.setLayoutParams(layoutParams);
+    }
+
+    private void setCarouselPaddings() {
+        int topPadding = 0;
+        if (mDetailsView.getVisibility() != View.VISIBLE) {
+            topPadding = mCarouselTopPaddingWithoutDetails;
+        }
+        mCarouselView.setPadding(mCarouselView.getPaddingLeft(), topPadding,
+                mCarouselView.getPaddingRight(), mCarouselView.getPaddingBottom());
+    }
+}

chrome/android/java_sources.gni

@@ -122,6 +122,7 @@ chrome_java_sources = [
   "java/src/org/chromium/chrome/browser/autofill_assistant/AutofillAssistantUiController.java",
   "java/src/org/chromium/chrome/browser/autofill_assistant/AutofillAssistantUiDelegate.java",
   "java/src/org/chromium/chrome/browser/autofill_assistant/InitScreenController.java",
+  "java/src/org/chromium/chrome/browser/autofill_assistant/ui/BottomBarAnimations.java",
   "java/src/org/chromium/chrome/browser/autofill_assistant/ui/PaymentRequestBottomBar.java",
   "java/src/org/chromium/chrome/browser/autofill_assistant/ui/PaymentRequestUI.java",
   "java/src/org/chromium/chrome/browser/background_task_scheduler/NativeBackgroundTask.java",