TabGridDialog UI Polish

* Shift the grid in dialog up by 8dp.
* Put dialog title in the correct position and modify the text
appearance.
* Replace the original hide dialog button with back arrow.
* Round the corners of the dialog by 8dp.

Bug: 977273
Change-Id: Id0df26d12264dca313ad4554f8e115366e1d5bc8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1674924
Commit-Queue: Yue Zhang <yuezhanggg@google.com>
Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#672222}

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

@@ -8,7 +8,7 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:id="@+id/dialog_container_view"
-    android:background="@color/modern_primary_color">
+    android:background="@drawable/tab_grid_card_background">
     <TextView
         android:layout_width="match_parent"
         android:layout_height="@dimen/bottom_sheet_peek_height"

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

@@ -20,6 +20,8 @@
     <dimen name="tab_grid_thumbnail_favicon_background_radius">3dp</dimen>
     <dimen name="tab_grid_thumbnail_favicon_background_padding">2dp</dimen>
     <dimen name="tab_grid_thumbnail_favicon_background_down_shift">2dp</dimen>
+    <dimen name="tab_group_toolbar_height">48dp</dimen>
+    <dimen name="tab_group_toolbar_topic_margin">8dp</dimen>
     <dimen name="swipe_to_dismiss_threshold">72dp</dimen>
     <dimen name="selection_tab_grid_toggle_button_inset">12dp</dimen>
 </resources>

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

@@ -82,7 +82,7 @@ public class TabGridDialogParent {
         mStatusBarHeight = context.getResources().getDimensionPixelSize(statusBarHeightResourceId);
         mTabGridCardPadding = context.getResources().getDimension(R.dimen.tab_list_card_padding);
         mToolbarHeight =
-                (int) context.getResources().getDimension(R.dimen.bottom_sheet_peek_height);
+                (int) context.getResources().getDimension(R.dimen.tab_group_toolbar_height);
         mContainerParams = new FrameLayout.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
         mComponentCallbacks = new ComponentCallbacks() {

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

@@ -40,6 +40,9 @@ class TabGridSheetToolbarCoordinator implements Destroyable {
             PropertyModel toolbarPropertyModel, TabGridDialogParent dialog) {
         mToolbarView = (TabGroupUiToolbarView) LayoutInflater.from(context).inflate(
                 R.layout.bottom_tab_grid_toolbar, contentView, false);
+        if (dialog != null) {
+            mToolbarView.setupDialogToolbarLayout();
+        }
         mModelChangeProcessor = PropertyModelChangeProcessor.create(toolbarPropertyModel,
                 new TabGridSheetViewBinder.ViewHolder(mToolbarView, contentView, dialog),
                 TabGridSheetViewBinder::bind);

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

@@ -6,7 +6,10 @@ package org.chromium.chrome.browser.tasks.tab_management;
 
 import android.content.Context;
 import android.content.res.ColorStateList;
+import android.support.v4.widget.TextViewCompat;
+import android.support.v7.content.res.AppCompatResources;
 import android.util.AttributeSet;
+import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
@@ -50,10 +53,6 @@ public class TabGroupUiToolbarView extends FrameLayout {
         mRightButton.setOnClickListener(listener);
     }
 
-    void setTitleOnClickListener(OnClickListener listener) {
-        mTitleTextView.setOnClickListener(listener);
-    }
-
     ViewGroup getViewContainer() {
         return mContainerView;
     }
@@ -84,4 +83,20 @@ public class TabGroupUiToolbarView extends FrameLayout {
         ApiCompatibilityUtils.setImageTintList(mRightButton, tint);
         if (mTitleTextView != null) mTitleTextView.setTextColor(tint);
     }
+
+    /**
+     * Setup a TabGridDialog-specific toolbar. It is different from the toolbar for TabGridSheet.
+     */
+    void setupDialogToolbarLayout() {
+        Context context = getContext();
+        setBackground(AppCompatResources.getDrawable(context, R.drawable.tab_grid_card_background));
+        mLeftButton.setImageResource(org.chromium.chrome.R.drawable.ic_arrow_back_24dp);
+        int topicMargin =
+                (int) context.getResources().getDimension(R.dimen.tab_group_toolbar_topic_margin);
+        MarginLayoutParams params = (MarginLayoutParams) mTitleTextView.getLayoutParams();
+        params.setMarginStart(topicMargin);
+        mTitleTextView.setGravity(Gravity.START);
+        TextViewCompat.setTextAppearance(
+                mTitleTextView, org.chromium.chrome.R.style.TextAppearance_BlackHeadline);
+    }
 }