added scale animation for context menu

chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java

Index: chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
diff --git a/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java b/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
index 09428c07607022ac3b53855c70553f103e64cdfe..e1317a75b061c33f906c6188c28df4517e9f209a 100644
--- a/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
+++ b/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
@@ -5,22 +5,27 @@
 package org.chromium.chrome.browser.contextmenu;
 
 import android.app.Activity;
-import android.app.Dialog;
 import android.content.DialogInterface;
 import android.content.res.Resources;
 import android.graphics.Bitmap;
 import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Rect;
 import android.graphics.Shader;
 import android.graphics.drawable.BitmapDrawable;
+import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.support.design.widget.TabLayout;
-import android.support.v4.view.ViewPager;
 import android.support.v7.app.AlertDialog;
 import android.text.TextUtils;
 import android.util.Pair;
 import android.view.LayoutInflater;
 import android.view.View;
+import android.view.View.OnLayoutChangeListener;
 import android.view.ViewGroup;
+import android.view.ViewGroup.LayoutParams;
+import android.view.Window;
+import android.view.animation.Animation;
 import android.widget.AdapterView;
 import android.widget.BaseAdapter;
 import android.widget.ImageView;
@@ -31,6 +36,8 @@ import org.chromium.base.ApiCompatibilityUtils;
 import org.chromium.base.Callback;
 import org.chromium.base.VisibleForTesting;
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.widget.ContextMenuDialog;
+import org.chromium.content.browser.RenderCoordinates;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -39,71 +46,122 @@ import java.util.List;
  * A custom dialog that separates each group into separate tabs. It uses a dialog instead.
  */
 public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemClickListener {
-    private Dialog mDialog;
+    private ContextMenuDialog mContextMenuDialog;
     private Callback<Integer> mCallback;
     private int mMenuItemHeight;
     private ImageView mHeaderImageView;
     private Runnable mOnShareItemClicked;
+    private View mPagerView;
+
+    private float mContextMenuSourceX;
+    private float mContextMenuSourceY;
+    private int mContextMenuFirstLocationY;
+    private RenderCoordinates mRenderCoordinates;
+
+    private static final double MAX_WIDTH_PROPORTION = 0.75;

[Theresa, 2017/05/24 20:16:33]

nit: private static final variables should go above regular private variables

[Daniel Park, 2017/05/24 22:34:31]

Done.

 
     public TabularContextMenuUi(Runnable onShareItemClicked) {
         mOnShareItemClicked = onShareItemClicked;
     }
 
     @Override
-    public void displayMenu(Activity activity, ContextMenuParams params,
+    public void displayMenu(final Activity activity, ContextMenuParams params,
             List<Pair<Integer, List<ContextMenuItem>>> items, Callback<Integer> onItemClicked,
             final Runnable onMenuShown, final Runnable onMenuClosed) {
         mCallback = onItemClicked;
-        mDialog = createDialog(activity, params, items);
-
-        mDialog.getWindow().setBackgroundDrawable(ApiCompatibilityUtils.getDrawable(
-                activity.getResources(), R.drawable.white_with_rounded_corners));
+        mContextMenuDialog = createContextMenuDialog(activity, params, items);
 
-        mDialog.setOnShowListener(new DialogInterface.OnShowListener() {
+        mContextMenuDialog.setOnShowListener(new DialogInterface.OnShowListener() {
             @Override
             public void onShow(DialogInterface dialogInterface) {
                 onMenuShown.run();
             }
         });
 
-        mDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
+        mContextMenuDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
             @Override
             public void onDismiss(DialogInterface dialogInterface) {
                 onMenuClosed.run();
             }
         });
 
-        mDialog.show();
+        Window dialogWindow = mContextMenuDialog.getWindow();
+        dialogWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
+        dialogWindow.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
+
+        float density = Resources.getSystem().getDisplayMetrics().density;
+        final float touchPointX = params.getTriggeringTouchX() * density;
+        final float touchPointY = params.getTriggeringTouchY() * density;
+
+        mPagerView.setVisibility(View.INVISIBLE);
+        mPagerView.addOnLayoutChangeListener(new OnLayoutChangeListener() {
+
+            @Override
+            public void onLayoutChange(View v, int left, int top, int right, int bottom,
+                    int oldLeft, int oldTop, int oldRight, int oldBottom) {
+                ViewGroup group = (ViewGroup) v;
+                for (int i = 0; i < group.getChildCount(); i++) {
+                    if (group.getChildAt(i).getHeight() == 0
+                            && group.getChildAt(i).getVisibility() == View.VISIBLE) {
+                        // Return early because not all the views have been measured, so animations
+                        // pivots will be off.
+                        return;
+                    }
+                }
+                revealViewAndStartEnterAnimation(touchPointX, touchPointY, activity);
+                mPagerView.removeOnLayoutChangeListener(this);
+                mContextMenuDialog.setExitAnimationParameters(mPagerView, mContextMenuSourceX,
+                        mContextMenuSourceY, mContextMenuFirstLocationY);
+            }
+        });
+        mContextMenuDialog.show();
     }
 
     /**
      * Returns the fully complete dialog based off the params and the itemGroups.
+     *
      * @param activity Used to inflate the dialog.
      * @param params Used to get the header title.
      * @param itemGroups If there is more than one group it will create a paged view.
      * @return Returns a final dialog that does not have a background can be displayed using
      *         {@link AlertDialog#show()}.
      */
-    private Dialog createDialog(Activity activity, ContextMenuParams params,
+    private ContextMenuDialog createContextMenuDialog(Activity activity, ContextMenuParams params,
             List<Pair<Integer, List<ContextMenuItem>>> itemGroups) {
-        Dialog dialog = new Dialog(activity);
-        dialog.setContentView(createPagerView(activity, params, itemGroups));
+        final ContextMenuDialog dialog = new ContextMenuDialog(activity, R.style.DialogWhenLarge);
+
+        View view = LayoutInflater.from(activity).inflate(R.layout.tabular_context_menu, null);
+
+        Resources resources = activity.getResources();
+
+        int contextMenuWidth =
+                (int) Math.min(resources.getDisplayMetrics().widthPixels * MAX_WIDTH_PROPORTION,
+                        resources.getDimensionPixelSize(R.dimen.context_menu_max_width));
+
+        mPagerView = initPagerView(activity, params, itemGroups,
+                (TabularContextMenuViewPager) view.findViewById(R.id.custom_pager));
+        mPagerView.getLayoutParams().width = contextMenuWidth;
+
+        dialog.addContentView(

[Theresa, 2017/05/24 20:16:33]

setContentView() instead of addContentView() since there should only ever be one
content view attached to the dialog?

Also, does this work without the constructed layout params if you set
android:layout_with and layout_height on the root view in the inflated XML?

[Daniel Park, 2017/05/24 22:34:31]

Done.

+                view, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
+
         return dialog;
     }
 
     /**
      * Creates a ViewPageAdapter based off the given list of views.
-     * @param activity Used to inflate the new ViewPager
+     *
+     * @param activity Used to inflate the new ViewPager.
      * @param params Used to get the header text.
      * @param itemGroups The list of views to put into the ViewPager. The string is the title of the
-     *                   tab
+     *                   tab.
+     * @param viewPager The viewpager to initialize.
      * @return Returns a complete tabular context menu view.
      */
     @VisibleForTesting
-    View createPagerView(Activity activity, ContextMenuParams params,
-            List<Pair<Integer, List<ContextMenuItem>>> itemGroups) {
-        View view = LayoutInflater.from(activity).inflate(R.layout.tabular_context_menu, null);
-
+    View initPagerView(Activity activity, ContextMenuParams params,
+            List<Pair<Integer, List<ContextMenuItem>>> itemGroups,
+            TabularContextMenuViewPager viewPager) {
         List<Pair<String, ViewGroup>> viewGroups = new ArrayList<>();
         int maxCount = 0;
         for (int i = 0; i < itemGroups.size(); i++) {
@@ -118,30 +176,23 @@ public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemCl
                     createContextMenuPageUi(
                             activity, params, itemGroup.second, isImageTab, maxCount)));
         }
-        if (itemGroups.size() == 1) {
-            viewGroups.get(0)
-                    .second.getChildAt(0)
-                    .findViewById(R.id.context_header_layout)
-                    .setBackgroundResource(R.color.google_grey_100);
-        }
-
-        TabularContextMenuViewPager pager =
-                (TabularContextMenuViewPager) view.findViewById(R.id.custom_pager);
-        pager.setAdapter(new TabularContextMenuPagerAdapter(viewGroups));
 
-        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
+        viewPager.setAdapter(new TabularContextMenuPagerAdapter(viewGroups));
+        TabLayout tabLayout = (TabLayout) viewPager.findViewById(R.id.tab_layout);
         if (itemGroups.size() <= 1) {
             tabLayout.setVisibility(View.GONE);
         } else {
-            tabLayout.setupWithViewPager((ViewPager) view.findViewById(R.id.custom_pager));
+            tabLayout.setBackgroundResource(R.drawable.grey_with_top_rounded_corners);
+            tabLayout.setupWithViewPager(viewPager);
         }
 
-        return view;
+        return viewPager;
     }
 
     /**
      * Creates the view of a context menu. Based off the Context Type, it'll adjust the list of
      * items and display only the ones that'll be on that specific group.
+     *
      * @param activity Used to get the resources of an item.
      * @param params used to create the header text.
      * @param items A set of Items to display in a context menu. Filtered based off the type.
@@ -172,7 +223,7 @@ public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemCl
             @Override
             public void run() {
                 mOnShareItemClicked.run();
-                mDialog.dismiss();
+                mContextMenuDialog.dismiss();
             }
         };
         TabularContextMenuListAdapter listAdapter =
@@ -245,6 +296,7 @@ public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemCl
      * To save time measuring the height, this method gets an item if the height has not been
      * previous measured and multiplies it by count of the total amount of items. It is fine if the
      * height too small as the ListView will scroll through the other values.
+     *
      * @param listView The ListView to measure the surrounding padding.
      * @param listAdapter The adapter which contains the items within the list.
      * @return Returns the combined height of the padding of the ListView and the approximate height
@@ -263,8 +315,64 @@ public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemCl
     }
 
     /**
-     * When an thumbnail is retrieved for the header of an image, this will set the header to
-     * that particular bitmap.
+     * @param touchPointX The x-coordinate of the touch that triggered the context menu in pixels.
+     * @param touchPointY The y-coordinate of the touch that triggered the context menu in pixels.
+     * @param activity Activity to determine the number of pixels to the left and above of the
+     *                 window.
+     */
+    private void revealViewAndStartEnterAnimation(
+            final float touchPointX, final float touchPointY, Activity activity) {
+        mPagerView.setVisibility(View.VISIBLE);
+
+        int[] currentLocationOnScreen = new int[2];
+        mPagerView.getLocationOnScreen(currentLocationOnScreen);
+
+        mContextMenuFirstLocationY = currentLocationOnScreen[1];
+        mPagerView.startAnimation(initPivotValuesAndGetEnterScaleAnimation(touchPointX, touchPointY,
+                currentLocationOnScreen[0], currentLocationOnScreen[1], activity));
+    }
+
+    /**
+     * @param touchPointX The starting x-coordinate of the translation animation.
+     * @param touchPointY The starting y-coordinate of the translation animation.
+     * @param viewLocationX The x-coordinate of the top left corner of the view relative to the
+     *                      device.
+     * @param viewLocationY The y-coordinate of the top left corner of the view relative to the
+     *                      device.
+     * @param activity Activity to determine the number of pixels to the left and above of the
+     *                     window.

[Theresa, 2017/05/24 20:16:33]

nit: align "window" with "Activity"

[Daniel Park, 2017/05/24 22:34:31]

Done.

+     * @return Returns the entering scale animation for the context menu.
+     */
+    private Animation initPivotValuesAndGetEnterScaleAnimation(final float touchPointX,

[Theresa, 2017/05/24 20:16:33]

nit: this is probably more verbose than needed. I would just call it
getEnterScaleAnimation()

[Daniel Park, 2017/05/24 22:34:31]

Done.

+            final float touchPointY, int viewLocationX, int viewLocationY, Activity activity) {
+        Rect rectangle = new Rect();
+        Window window = activity.getWindow();
+        window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
+
+        // yOffset represents how many pixels are taken up by anything above the content window
+        // e.g. toolbar & tab strip.
+        float yOffset = rectangle.top + mRenderCoordinates.getContentOffsetYPix();
+
+        // xOffset represents how many pixels are taken up by anything to the left of the content
+        // window e.g. navigation bar of the Nexus 6P when in landscape mode with usb port to the
+        // left.
+        float xOffset = rectangle.left;
+
+        /**
+         *  Touch points & view locations are relative to the content window i.e. 0, 0 represents
+         *  the top left corner of the content window, but animation requires coordinates relative
+         *  to the context menu. These operations are to transform the content window coordinates
+         *  to what they would be if they were relative to the the context menu.
+         */
+        mContextMenuSourceX = touchPointX - viewLocationX + xOffset;
+        mContextMenuSourceY = touchPointY - viewLocationY + yOffset;
+

[Theresa, 2017/05/24 20:16:33]

I was hoping all of this could move to ContextMenuDialog as well. In a perfect
world, this class would just call dialog#show() and ContextMenuDialog would
handle creating the scale animation and starting it.


If that's not possible (because of the layout listeners needed), then we could
move this method to ContextMenuDialog and change the layout listener to:

public void onLayoutChange(View v, int left, int top, int right, int bottom,
     int oldLeft, int oldTop, int oldRight, int oldBottom) {

    ....
    mContextMenuDialog.startEnterAnimation()
    mPagerView.removeOnLayoutChangeListener(this);
}

[Daniel Park, 2017/05/24 22:34:31]

Done.

+        return mContextMenuDialog.getScaleAnimation(true, mContextMenuSourceX, mContextMenuSourceY);
+    }
+
+    /**
+     * When an thumbnail is retrieved for the header of an image, this will set the header to that
+     * particular bitmap.
      */
     public void onImageThumbnailRetrieved(Bitmap bitmap) {
         if (mHeaderImageView != null) {
@@ -274,7 +382,15 @@ public class TabularContextMenuUi implements ContextMenuUi, AdapterView.OnItemCl
 
     @Override
     public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
-        mDialog.dismiss();
+        mContextMenuDialog.dismiss();
         mCallback.onResult((int) id);
     }
+
+    /**
+     * Gives this class access to the content view core to allow access to the total size of the

[Theresa, 2017/05/24 20:16:33]

This comment needs to be updated

[Daniel Park, 2017/05/24 22:34:31]

Done.

+     * toolbar and tab strip.
+     */
+    public void setRenderCoordinates(RenderCoordinates renderCoordinates) {
+        mRenderCoordinates = renderCoordinates;
+    }
 }