Polish the Message card

This CL polishes the Message card in GTS by the following:
  1. Updates Message card to follow the NTP promo card spec.
  2. Updates the close animation to have a zoom in then fade out visual
     effect. Applies this animation to the Tab card as well.

Change-Id: I14ff8c3746b9c0bebafd6f3afc7077d337ffbcb9
Bug: 1076538
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2240422Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Commit-Queue: Mei Liang <meiliang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#778030}

chrome/android/features/tab_ui/BUILD.gn

@@ -35,6 +35,8 @@ android_resources("java_resources") {
     "java/res/drawable/ic_group_icon_16dp.xml",
     "java/res/drawable/iph_drag_and_drop_animated_drawable.xml",
     "java/res/drawable/iph_drag_and_drop_drawable.xml",
+    "java/res/drawable/message_card_background.xml",
+    "java/res/drawable/message_card_background_with_inset.xml",
     "java/res/drawable/popup_bg_dark.xml",
     "java/res/drawable/selected_tab_background.xml",
     "java/res/drawable/selected_tab_background_incognito.xml",

chrome/android/features/tab_ui/java/res/drawable/message_card_background.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2020 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" >
+    <solid android:color="@color/default_bg_color" />
+    <stroke android:width="1dp" android:color="@color/hairline_stroke_color"/>
+    <corners android:radius="@dimen/tab_list_card_radius" />
+</shape>

chrome/android/features/tab_ui/java/res/drawable/message_card_background_with_inset.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2020 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. -->
+
+<inset
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:drawable="@drawable/message_card_background"
+    android:inset="@dimen/tab_list_selected_inset"/>

chrome/android/features/tab_ui/java/res/layout/tab_grid_message_card_item.xml

@@ -9,7 +9,7 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
-    android:background="@drawable/popup_bg_tinted">
+    android:background="@drawable/message_card_background_with_inset">
     <org.chromium.ui.widget.ChromeImageView
         android:id="@+id/icon"
         android:layout_width="0dp"

chrome/android/features/tab_ui/java/src/org/chromium/chrome/browser/tasks/tab_management/TabListRecyclerView.java

@@ -8,6 +8,7 @@ import static org.chromium.chrome.features.start_surface.StartSurfaceLayout.ZOOM
 
 import android.animation.Animator;
 import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
 import android.animation.ObjectAnimator;
 import android.animation.ValueAnimator;
 import android.annotation.SuppressLint;
@@ -31,6 +32,7 @@ import android.widget.RelativeLayout;
 import androidx.annotation.Nullable;
 import androidx.annotation.VisibleForTesting;
 import androidx.appcompat.content.res.AppCompatResources;
+import androidx.recyclerview.widget.DefaultItemAnimator;
 import androidx.recyclerview.widget.GridLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;
 
@@ -110,6 +112,28 @@ class TabListRecyclerView
         }
     }
 
+    private class RemoveItemAnimator extends DefaultItemAnimator {
+        @Override
+        public boolean animateRemove(ViewHolder holder) {
+            AnimatorSet scaleAnimator = new AnimatorSet();
+            scaleAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    holder.itemView.setScaleX(1.0f);
+                    holder.itemView.setScaleY(1.0f);
+                }
+            });
+            ObjectAnimator scaleX = ObjectAnimator.ofFloat(holder.itemView, View.SCALE_X, 0.5f);
+            ObjectAnimator scaleY = ObjectAnimator.ofFloat(holder.itemView, View.SCALE_Y, 0.5f);
+            scaleX.setDuration(BASE_ANIMATION_DURATION_MS);
+            scaleY.setDuration(BASE_ANIMATION_DURATION_MS);
+            scaleAnimator.play(scaleX).with(scaleY);
+            scaleAnimator.start();
+
+            return super.animateRemove(holder);
+        }
+    }
+
     private final int mResourceId;
     private ValueAnimator mFadeInAnimator;
     private ValueAnimator mFadeOutAnimator;
@@ -118,11 +142,12 @@ class TabListRecyclerView
     private ViewResourceAdapter mDynamicView;
     private boolean mIsDynamicViewRegistered;
     private long mLastDirtyTime;
-    private RecyclerView.ItemAnimator mOriginalAnimator;
     private ImageView mShadowImageView;
     private int mShadowTopMargin;
     private TabListOnScrollListener mScrollListener;
 
+    private final RemoveItemAnimator mRemoveItemAnimator = new RemoveItemAnimator();
+
     /**
      * Basic constructor to use during inflation from xml.
      */
@@ -147,7 +172,6 @@ class TabListRecyclerView
         registerDynamicView();
 
         // Stop all the animations to make all the items show up and scroll to position immediately.
-        mOriginalAnimator = getItemAnimator();
         setItemAnimator(null);
     }
 
@@ -175,7 +199,7 @@ class TabListRecyclerView
                 mFadeInAnimator = null;
                 mListener.finishedShowing();
                 // Restore the original value.
-                setItemAnimator(mOriginalAnimator);
+                setItemAnimator(mRemoveItemAnimator);
                 setShadowVisibility(computeVerticalScrollOffset() > 0);
                 if (mDynamicView != null) {
                     mDynamicView.dropCachedBitmap();

chrome/test/data/android/render_tests/TabGridIphTest.iph_entrance_landscape.Nexus_5X-23.png.sha1

-d1a26778191711bc6aff75749618ed3da0f6c902
+0a623106e18ee66d98b5ff303f323b76ff47c3fd
\ No newline at end of file

chrome/test/data/android/render_tests/TabGridIphTest.iph_entrance_portrait.Nexus_5X-23.png.sha1

-2fae37606db1ebd39c323457ce734bdf58ef0bd9
+7ab885e96dc61f343e0f6c5c6496bc6079ab7983
\ No newline at end of file