[Explore sites]: Make error and loading views pretty.

Remove the header in error and loading views and change the error view to look
more like a typical error page.

Bug: 907638
Change-Id: I6aca95c1bd6e1334b86416879283b0a26471719e
Reviewed-on: https://chromium-review.googlesource.com/c/1347215Reviewed-by: Theresa <twellington@chromium.org>
Commit-Queue: Cathy Li <chili@chromium.org>
Cr-Commit-Position: refs/heads/master@{#612074}

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

@@ -3,16 +3,44 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
-<FrameLayout
+<LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:gravity="center"
-    android:orientation="vertical" >
+    android:orientation="vertical"
+    android:padding="@dimen/explore_sites_page_padding" >
+    <ImageView
+        android:layout_height="wrap_content"
+        android:layout_width="wrap_content"
+        android:src="@drawable/sad_tab"
+        android:layout_marginTop="@dimen/explore_sites_error_image_margin_top"
+        android:layout_marginBottom="@dimen/explore_sites_error_image_margin_bottom"
+        android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
+        android:contentDescription="@string/explore_sites_loading_error" />
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:gravity="center"
+        android:gravity="start"
         android:text="@string/explore_sites_loading_error"
-        android:drawableTop="@drawable/sad_tab" />
-</FrameLayout>
+        android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
+        android:layout_marginBottom="@dimen/explore_sites_page_padding"
+        android:textAppearance="@style/BlackHeadline" />
+    <org.chromium.ui.widget.TextViewWithLeading
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="start"
+        android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
+        android:text="@string/explore_sites_loading_error_next_steps_tag"
+        android:textAppearance="@style/BlackCaptionDefault"
+        app:leading="@dimen/text_size_small_leading" />
+    <org.chromium.ui.widget.TextViewWithLeading
+        android:id="@+id/error_view_next_steps"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:gravity="start"
+        android:layout_marginHorizontal="@dimen/explore_sites_page_padding"
+        android:paddingStart="@dimen/explore_sites_page_padding"
+        android:textAppearance="@style/BlackCaptionDefault"
+        app:leading="@dimen/text_size_small_leading" />
+</LinearLayout>

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

@@ -14,8 +14,9 @@
         android:id="@+id/loading"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:minHeight="@dimen/tile_view_width"
-        android:minWidth="@dimen/tile_view_width" />
+        android:minHeight="@dimen/explore_sites_loading_spinny_size"
+        android:minWidth="@dimen/explore_sites_loading_spinny_size"
+        android:paddingBottom="@dimen/explore_sites_loading_spinny_padding"/>
     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"

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

@@ -11,4 +11,4 @@
     android:scrollbars="vertical"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:padding="@dimen/explore_sites_page_padding" />
+    android:paddingHorizontal="@dimen/explore_sites_page_padding" />

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

@@ -370,6 +370,10 @@
     <dimen name="explore_sites_category_title_height">24dp</dimen>
     <dimen name="explore_sites_page_padding">12dp</dimen>
     <dimen name="explore_sites_category_title_spacing">16dp</dimen>
+    <dimen name="explore_sites_error_image_margin_bottom">40dp</dimen>
+    <dimen name="explore_sites_error_image_margin_top">84dp</dimen>
+    <dimen name="explore_sites_loading_spinny_size">36dp</dimen>
+    <dimen name="explore_sites_loading_spinny_padding">24dp</dimen>
 
     <!-- Recent tabs page -->
     <dimen name="recent_tabs_visible_separator_padding">8dp</dimen>

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

@@ -4,9 +4,12 @@
 
 package org.chromium.chrome.browser.explore_sites;
 
+import android.content.Context;
 import android.support.annotation.IntDef;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.RecyclerView;
+import android.text.SpannableString;
+import android.text.SpannableStringBuilder;
 
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.modelutil.ListObservable;
@@ -21,6 +24,8 @@ import org.chromium.chrome.browser.native_page.NativePageNavigationDelegate;
 import org.chromium.chrome.browser.profiles.Profile;
 import org.chromium.chrome.browser.widget.LoadingView;
 import org.chromium.chrome.browser.widget.RoundedIconGenerator;
+import org.chromium.ui.widget.ChromeBulletSpan;
+import org.chromium.ui.widget.TextViewWithLeading;
 
 import java.lang.annotation.Retention;
 import java.lang.annotation.RetentionPolicy;
@@ -65,10 +70,10 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
 
     @Override
     public int getItemCount() {
-        // If not loaded, return 2 for title and error/loading section
+        // If not loaded, return 1 error/loading section
         if (mCategoryModel.get(ExploreSitesPage.STATUS_KEY)
                 != ExploreSitesPage.CatalogLoadingState.SUCCESS) {
-            return 2;
+            return 1;
         }
         // Add 1 for title.
         return mCategoryModel.get(ExploreSitesPage.CATEGORY_LIST_KEY).size() + 1;
@@ -77,7 +82,6 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
     @Override
     @ViewType
     public int getItemViewType(int position) {
-        if (position == 0) return ViewType.HEADER;
         switch (mCategoryModel.get(ExploreSitesPage.STATUS_KEY)) {
             case ExploreSitesPage.CatalogLoadingState.ERROR:
                 return ViewType.ERROR;
@@ -85,6 +89,7 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
             case ExploreSitesPage.CatalogLoadingState.LOADING_NET:
                 return ViewType.LOADING;
             case ExploreSitesPage.CatalogLoadingState.SUCCESS:
+                if (position == 0) return ViewType.HEADER;
                 return ViewType.CATEGORY;
             default:
                 assert(false);
@@ -105,6 +110,18 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
             // Start spinner.
             LoadingView spinner = holder.itemView.findViewById(R.id.loading);
             spinner.showLoadingUI();
+        } else if (holder.getItemViewType() == ViewType.ERROR) {
+            TextViewWithLeading textView = holder.itemView.findViewById(R.id.error_view_next_steps);
+            Context context = textView.getContext();
+            SpannableStringBuilder spannableString = new SpannableStringBuilder();
+            SpannableString tip1 = new SpannableString(
+                    context.getString(R.string.explore_sites_loading_error_next_steps_reload));
+            SpannableString tip2 = new SpannableString(context.getString(
+                    R.string.explore_sites_loading_error_next_steps_check_connection));
+            tip1.setSpan(new ChromeBulletSpan(context), 0, tip1.length(), 0);
+            tip2.setSpan(new ChromeBulletSpan(context), 0, tip2.length(), 0);
+            spannableString.append(tip1).append("\n").append(tip2);
+            textView.setText(spannableString);
         }
     }
 
@@ -114,11 +131,11 @@ class CategoryCardAdapter extends ListObservableImpl<Void>
         if (key == ExploreSitesPage.STATUS_KEY) {
             int status = mCategoryModel.get(ExploreSitesPage.STATUS_KEY);
             if (status != ExploreSitesPage.CatalogLoadingState.SUCCESS) {
-                notifyItemChanged(1);
+                notifyItemChanged(0);
             } else {
                 // If it's success, we must "remove" the loading view.
                 // Loading the categories is taken care of by the list observer.
-                notifyItemRangeRemoved(/* index= */ 1, /* count= */ 1);
+                notifyItemRangeRemoved(/* index= */ 0, /* count= */ 1);
             }
         }
         if (key == ExploreSitesPage.SCROLL_TO_CATEGORY_KEY) {

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

@@ -42,7 +42,7 @@ class CategoryCardViewHolderFactory implements RecyclerViewAdapter.ViewHolderFac
                                .inflate(R.layout.explore_sites_loading_from_net_view, parent,
                                        /* attachToRoot = */ false);
                 break;
-            case CategoryCardAdapter.ViewType.ERROR: // inflate error
+            case CategoryCardAdapter.ViewType.ERROR:
                 view = LayoutInflater.from(parent.getContext())
                                .inflate(R.layout.explore_sites_loading_error_view, parent,
                                        /* attachToRoot = */ false);

chrome/android/java/strings/android_chrome_strings.grd

@@ -2922,10 +2922,19 @@ To change this setting, <ph name="BEGIN_LINK">&lt;resetlink&gt;</ph>reset sync<p
         Shopping
       </message>
       <message name="IDS_EXPLORE_SITES_LOADING_FROM_NET" desc="Caption for an indeterminate loading spinner indicating that we are loading the data from the internet">
-        Finding the best from the web.
+        Finding the best from the web…
       </message>
       <message name="IDS_EXPLORE_SITES_LOADING_ERROR" desc="Caption text indicating that a set of site icons and links failed to load.">
-        Oops! Something went wrong. Please check your connection.
+        Can't load this page
+      </message>
+      <message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_TAG" desc="Text on an error screen indicating posible steps to resolve the error.">
+        Try:
+      </message>
+      <message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_RELOAD" desc="Text on an error screen indicating that reloading the page can fix this error.">
+        Reload this page
+      </message>
+      <message name="IDS_EXPLORE_SITES_LOADING_ERROR_NEXT_STEPS_CHECK_CONNECTION" desc="Text on an error screen indicating that checking network connection can fix this error.">
+        Check your internet connection
       </message>
 
       <!-- Contextual suggestions strings -->