[Explore sites]: fix margins and add border to "more categories" button.

Bug: 852075
Change-Id: Ibdd7001d62b9adc0f3d2c74b12f77e904cf27d06
Reviewed-on: https://chromium-review.googlesource.com/1112706
Commit-Queue: Cathy Li <chili@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569966}

chrome/android/java/res/drawable/button_white_border.xml

+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- 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.
+-->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+        android:shape="rectangle">
+    <solid android:color="@color/light_background_color" />
+    <corners android:radius="4dp" />
+    <stroke android:width="1dp" android:color="@color/google_grey_300" />
+</shape>

chrome/android/java/res/layout/explore_sites_category_tile_view.xml

@@ -16,7 +16,6 @@
     <ImageView
         android:id="@+id/explore_sites_category_tile_icon"
         android:layout_gravity="center_horizontal"
-        android:layout_marginTop="@dimen/explore_sites_padding"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:contentDescription="@null" />

chrome/android/java/res/layout/explore_sites_section.xml

@@ -7,7 +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/explore_sites_margin"
     android:orientation="vertical"
     android:gravity="center" >
 
@@ -16,6 +15,7 @@
         android:id="@+id/explore_sites_title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/explore_sites_spacing"
         android:gravity="center"
         android:text="@string/ntp_explore_sites_title" />
 
@@ -23,15 +23,19 @@
         android:id="@+id/explore_sites_tiles"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/explore_sites_spacing"
+        android:paddingHorizontal="@dimen/explore_sites_padding"
         android:orientation="horizontal" />
 
     <Button
-        style="@style/SuggestionCardAction"
+        style="@style/ExploreSitesAction"
         android:id="@+id/explore_sites_more_button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:gravity="center"
-        android:layout_margin="@dimen/explore_sites_margin"
+        android:layout_marginTop="@dimen/explore_sites_spacing"
+        android:layout_marginHorizontal="@dimen/explore_sites_margin"
+        android:layout_marginBottom="@dimen/explore_sites_spacing"
         android:text="@string/ntp_explore_sites_more" />
 
 </LinearLayout>

chrome/android/java/res/values-v17/styles.xml

@@ -771,4 +771,10 @@
       <item name="android:paddingStart">?android:attr/listPreferredItemPaddingStart</item>
       <item name="android:paddingEnd">?android:attr/listPreferredItemPaddingEnd</item>
     </style>
+
+    <!-- Explore sites section -->
+    <style name="ExploreSitesAction" parent="ButtonCompatBorderless">
+        <item name="android:textAppearance">@style/BlueLink2</item>
+        <item name="android:background">@drawable/button_white_border</item>
+    </style>
 </resources>

chrome/android/java/res/values-v21/styles.xml

@@ -116,4 +116,12 @@
              half is way brighter than the bottom), so we use our own. -->
         <item name="android:textCursorDrawable">@drawable/text_cursor_lowend</item>
     </style>
+
+    <!-- Explore sites section -->
+    <style name="ExploreSitesAction" parent="ButtonCompatBorderless">
+        <item name="android:textAppearance">@style/BlueLink2</item>
+        <item name="android:background">@drawable/button_white_border</item>
+        <!-- API 21 introduces state list animation. This will remove the auto-shadow -->
+        <item name="android:stateListAnimator">@null</item>
+    </style>
 </resources>

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

@@ -347,8 +347,9 @@
     <dimen name="ntp_search_box_logo_padding">8dp</dimen>
     <dimen name="ntp_search_box_voice_search_margin_end_modern">6dp</dimen>
     <dimen name="explore_sites_radius">8dp</dimen>
-    <dimen name="explore_sites_padding">6dp</dimen>
-    <dimen name="explore_sites_margin">12dp</dimen>
+    <dimen name="explore_sites_padding">8dp</dimen>
+    <dimen name="explore_sites_margin">16dp</dimen>
+    <dimen name="explore_sites_spacing">12dp</dimen>
     <!-- Negative vertical inset added to the search box bounds when modern is enabled. 4dp is added
          to both the top and bottom bounds to bring the 48dp modern_toolbar_background_size to 56dp
          (matches toolbar_height_no_shadow). -->

chrome/android/java/src/org/chromium/chrome/browser/explore_sites/ExploreSitesSection.java

@@ -54,11 +54,17 @@ public class ExploreSitesSection {
     private void initializeTiles(List<ExploreSitesCategoryTile> tileList) {
         if (tileList == null) return;
 
+        // TODO(chili): Try to get this from view hierarchy. This gets called before the
+        // mExploreSection is measured when opening ntp via 3 dot menu -> new tab,
+        // causing a crash. Max width is set to tile grid max width.
         Point screenSize = new Point();
         ((WindowManager) mExploreSection.getContext().getSystemService(Context.WINDOW_SERVICE))
                 .getDefaultDisplay()
                 .getSize(screenSize);
-        int tileWidth = screenSize.x / MAX_TILES;
+        int tileWidth = Math.min(screenSize.x,
+                                mExploreSection.getResources().getDimensionPixelSize(
+                                        R.dimen.tile_grid_layout_max_width))
+                / MAX_TILES;
 
         int tileCount = 0;
         for (final ExploreSitesCategoryTile tile : tileList) {