[NTP OptOut] Add expandable header UI part 1

Adding expandable header to article suggestions section. The header is
currently not controlled by a preference and is hard-coded to be always
expanded initially.

Bug: 803523
Change-Id: I298ce951045fc2f223eaf4c226b570d1d8362e3f
Reviewed-on: https://chromium-review.googlesource.com/905789
Commit-Queue: Becky Zhou <huayinz@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Reviewed-by: Bernhard Bauer <bauerb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#535902}

chrome/android/java/res/layout/new_tab_page_snippets_expandable_header.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. -->
+
+<LinearLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:orientation="horizontal"
+    android:paddingStart="@dimen/snippets_padding"
+    android:paddingEnd="@dimen/snippets_padding"
+    android:paddingTop="@dimen/snippets_header_top_padding"
+    android:gravity="center_vertical">
+
+    <TextView
+        android:id="@+id/header_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textAppearance="@style/BlackCaption" />
+
+    <org.chromium.chrome.browser.widget.TintedImageView
+        android:id="@+id/header_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:visibility="gone" />
+</LinearLayout>

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

@@ -5,10 +5,11 @@
 
 <TextView
     xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/header_title"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:textColor="@color/snippets_list_header_text_color"
     android:textSize="12sp"
     android:paddingStart="@dimen/snippets_padding"
-    android:paddingTop="10dp"
+    android:paddingTop="@dimen/snippets_header_top_padding"
     android:gravity="start|center_vertical" />

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

@@ -353,6 +353,7 @@
     <!-- The default padding for the peeking card and the amount the card peeks by in the current
          peeking card animation (the calculations assume this is the same). -->
     <dimen name="snippets_padding">16dp</dimen>
+    <dimen name="snippets_header_top_padding">10dp</dimen>
     <!-- The amount of the peeking card showing above the fold with the increased visibility UI
          (https://crbug.com/660837). -->
     <dimen name="snippets_peeking_card_peek_amount">32dp</dimen>

chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/SectionList.java

@@ -6,6 +6,7 @@ package org.chromium.chrome.browser.ntp.cards;
 
 import org.chromium.base.Log;
 import org.chromium.base.VisibleForTesting;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.ntp.snippets.CategoryInt;
 import org.chromium.chrome.browser.ntp.snippets.CategoryStatus;
 import org.chromium.chrome.browser.ntp.snippets.KnownCategories;
@@ -75,10 +76,17 @@ public class SectionList
             if (SnippetsBridge.isCategoryEnabled(categoryStatus)) {
                 resetSection(category, categoryStatus, alwaysAllowEmptySections,
                         shouldReportPrefetchedSuggestionsMetrics(category));
+            } else {
+                // If articles category is currently disabled, we may still need to show an
+                // expandable header for the section.
+                maybeAddSectionForHeader(category);
             }
         }
 
-        maybeHideArticlesHeader();
+        if (!ChromeFeatureList.isEnabled(
+                    ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)) {
+            maybeHideArticlesHeader();
+        }
         recordDisplayedSuggestions(categories);
     }
 
@@ -341,6 +349,25 @@ public class SectionList
         articlesSection.setHeaderVisibility(false);
     }
 
+    /**
+     * A section that allows zero items should be created for showing the section header if it is
+     * not yet created.
+     * @param category The category that needs a correspond section shown for the header.
+     */
+    private void maybeAddSectionForHeader(@CategoryInt int category) {
+        if (!ChromeFeatureList.isEnabled(
+                    ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER))
+            return;
+        if (category != KnownCategories.ARTICLES) return;
+
+        // TODO(huayinz): check whether preference can be changed by the user.
+        SuggestionsSection section = mSections.get(category);
+        if (section != null) return;
+
+        int status = mUiDelegate.getSuggestionsSource().getCategoryStatus(category);
+        resetSection(category, status, true, shouldReportPrefetchedSuggestionsMetrics(category));
+    }
+
     /**
      * Sets whether there are external sections shown above or below the section list.
      * Only intended for use in a rough contextual suggestions prototype.

chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/SuggestionsSection.java

@@ -11,9 +11,11 @@ import android.text.TextUtils;
 
 import org.chromium.base.Callback;
 import org.chromium.base.Log;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.ntp.NewTabPageUma;
 import org.chromium.chrome.browser.ntp.snippets.CategoryInt;
 import org.chromium.chrome.browser.ntp.snippets.CategoryStatus;
+import org.chromium.chrome.browser.ntp.snippets.KnownCategories;
 import org.chromium.chrome.browser.ntp.snippets.SectionHeader;
 import org.chromium.chrome.browser.ntp.snippets.SnippetArticle;
 import org.chromium.chrome.browser.ntp.snippets.SnippetArticleViewHolder;
@@ -90,7 +92,13 @@ public class SuggestionsSection extends InnerNode {
         mCategoryInfo = info;
         mSuggestionsSource = uiDelegate.getSuggestionsSource();
 
-        mHeader = new SectionHeader(info.getTitle());
+        boolean isExpandable = ChromeFeatureList.isEnabled(
+                                       ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)
+                && getCategory() == KnownCategories.ARTICLES;
+        // TODO(huayinz): use preference instead of hard-coded value for isExpanded.
+        mHeader = isExpandable ? new SectionHeader(info.getTitle(), true,
+                                         this::updateSuggestionsVisibilityForExpandableHeader)
+                               : new SectionHeader(info.getTitle());
         mSuggestionsList = new SuggestionsList(mSuggestionsSource, ranker, info);
         mMoreButton = new ActionItem(this, ranker);
 
@@ -107,7 +115,7 @@ public class SuggestionsSection extends InnerNode {
         uiDelegate.addDestructionObserver(mOfflineModelObserver);
 
         if (!isChromeHomeEnabled) {
-            mStatus.setVisible(!hasSuggestions());
+            mStatus.setVisible(shouldShowStatusItem());
         }
     }
 
@@ -254,7 +262,7 @@ public class SuggestionsSection extends InnerNode {
         // track down what's going wrong.
         assert (mStatus == null) == FeatureUtilities.isChromeHomeEnabled();
         if (mStatus != null) {
-            mStatus.setVisible(!hasSuggestions());
+            mStatus.setVisible(shouldShowStatusItem());
         }
 
         // When the ActionItem stops being dismissable, it is possible that it was being
@@ -435,6 +443,8 @@ public class SuggestionsSection extends InnerNode {
      */
     public void appendSuggestions(List<SnippetArticle> suggestions, boolean keepSectionSize,
             boolean reportPrefetchedSuggestionsCount) {
+        if (!shouldShowSuggestions()) return;
+
         int numberOfSuggestionsExposed = getNumberOfSuggestionsExposed();
         if (keepSectionSize) {
             Log.d(TAG, "updateSuggestions: keeping the first %d suggestion",
@@ -481,6 +491,7 @@ public class SuggestionsSection extends InnerNode {
      * Returns whether the list of suggestions can be updated at the moment.
      */
     private boolean canUpdateSuggestions(int numberOfSuggestionsExposed) {
+        if (!shouldShowSuggestions()) return false;
         if (!hasSuggestions()) return true; // If we don't have any, we always accept updates.
 
         if (CardsVariationParameters.ignoreUpdatesForExistingSuggestions()) {
@@ -547,7 +558,9 @@ public class SuggestionsSection extends InnerNode {
         }
 
         boolean isLoading = SnippetsBridge.isCategoryLoading(status);
-        mMoreButton.updateState(isLoading ? ActionItem.State.LOADING : ActionItem.State.BUTTON);
+        mMoreButton.updateState(!shouldShowSuggestions()
+                        ? ActionItem.State.HIDDEN
+                        : (isLoading ? ActionItem.State.LOADING : ActionItem.State.BUTTON));
     }
 
     /** Clears the suggestions and related data, resetting the state of the section. */
@@ -588,6 +601,20 @@ public class SuggestionsSection extends InnerNode {
         mHeader.setVisible(headerVisibility);
     }
 
+    /**
+     * @return Whether or not the suggestions should be shown in this section.
+     */
+    private boolean shouldShowSuggestions() {
+        return !mHeader.isExpandable() || mHeader.isExpanded();
+    }
+
+    /**
+     * @return Whether or not the {@link StatusItem} should be shown in this section.
+     */
+    private boolean shouldShowStatusItem() {
+        return shouldShowSuggestions() && !hasSuggestions();
+    }
+
     /**
      * @return The set of indices corresponding to items that can dismiss this entire section
      * (as opposed to individual items in it).
@@ -604,6 +631,22 @@ public class SuggestionsSection extends InnerNode {
         return new HashSet<>(Arrays.asList(statusCardIndex, statusCardIndex + 1));
     }
 
+    /**
+     * Update the visibility of the suggestions based on whether the header is expanded. This is
+     * called when the section header is toggled.
+     */
+    private void updateSuggestionsVisibilityForExpandableHeader() {
+        assert mHeader.isExpandable();
+        clearData();
+        if (mHeader.isExpanded()) {
+            updateSuggestions();
+            setStatus(mSuggestionsSource.getCategoryStatus(getCategory()));
+        } else {
+            mMoreButton.updateState(ActionItem.State.HIDDEN);
+        }
+        mStatus.setVisible(shouldShowStatusItem());
+    }
+
     public SuggestionsCategoryInfo getCategoryInfo() {
         return mCategoryInfo;
     }

chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SectionHeader.java

@@ -4,6 +4,8 @@
 
 package org.chromium.chrome.browser.ntp.snippets;
 
+import android.support.annotation.NonNull;
+
 import org.chromium.chrome.browser.ntp.cards.ItemViewType;
 import org.chromium.chrome.browser.ntp.cards.NewTabPageViewHolder;
 import org.chromium.chrome.browser.ntp.cards.NodeVisitor;
@@ -16,11 +18,30 @@ public class SectionHeader extends OptionalLeaf {
     /** The header text to be shown. */
     private final String mHeaderText;
 
+    private Runnable mToggleCallback;
+    private boolean mIsExpanded;
+
+    /**
+     * Constructor for non-expandable header.
+     * @param headerText The title of the header.
+     */
     public SectionHeader(String headerText) {
         this.mHeaderText = headerText;
         setVisibilityInternal(true);
     }
 
+    /**
+     * Constructor for expandable header.
+     * @param headerText The title of the header.
+     * @param isExpanded Whether the header is expanded initially.
+     * @param toggleCallback The callback to run when the header is toggled.
+     */
+    public SectionHeader(String headerText, boolean isExpanded, @NonNull Runnable toggleCallback) {
+        this(headerText);
+        mToggleCallback = toggleCallback;
+        mIsExpanded = isExpanded;
+    }
+
     @Override
     @ItemViewType
     public int getItemViewType() {
@@ -31,6 +52,29 @@ public class SectionHeader extends OptionalLeaf {
         return mHeaderText;
     }
 
+    /**
+     * @return Whether or not the header is expandable.
+     */
+    public boolean isExpandable() {
+        return mToggleCallback != null;
+    }
+
+    /**
+     * @return Whether or not the header is currently at the expanded state.
+     */
+    public boolean isExpanded() {
+        return mIsExpanded;
+    }
+
+    /**
+     * Toggle the expanded state of the header.
+     */
+    public void toggleHeader() {
+        mIsExpanded = !mIsExpanded;
+        notifyItemChanged(0, SectionHeaderViewHolder::updateIconDrawable);
+        mToggleCallback.run();
+    }
+
     @Override
     protected void onBindViewHolder(NewTabPageViewHolder holder) {
         ((SectionHeaderViewHolder) holder).onBindViewHolder(this);

chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SectionHeaderViewHolder.java

@@ -5,9 +5,12 @@
 package org.chromium.chrome.browser.ntp.snippets;
 
 import android.view.LayoutInflater;
+import android.view.View;
+import android.widget.ImageView;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.ntp.cards.NewTabPageViewHolder;
 import org.chromium.chrome.browser.suggestions.SuggestionsRecyclerView;
 import org.chromium.chrome.browser.util.MathUtils;
@@ -17,25 +20,46 @@ import org.chromium.chrome.browser.widget.displaystyle.UiConfig;
 /**
  * View holder for the header of a section of cards.
  */
-public class SectionHeaderViewHolder extends NewTabPageViewHolder {
+public class SectionHeaderViewHolder extends NewTabPageViewHolder implements View.OnClickListener {
     private static final double SCROLL_HEADER_HEIGHT_PERCENTAGE = 0.7;
 
     private final int mMaxSnippetHeaderHeight;
     private final MarginResizer mMarginResizer;
 
+    private final TextView mTitleView;
+    private final ImageView mIconView;
+
+    private SectionHeader mHeader;
+
     public SectionHeaderViewHolder(final SuggestionsRecyclerView recyclerView, UiConfig config) {
         super(LayoutInflater.from(recyclerView.getContext())
-                        .inflate(R.layout.new_tab_page_snippets_header, recyclerView, false));
+                        .inflate(
+                                ChromeFeatureList.isEnabled(
+                                        ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)
+                                        ? R.layout.new_tab_page_snippets_expandable_header
+                                        : R.layout.new_tab_page_snippets_header,
+                                recyclerView, false));
         mMaxSnippetHeaderHeight = itemView.getResources().getDimensionPixelSize(
                 R.dimen.snippets_article_header_height);
 
         int wideLateralMargin = recyclerView.getResources().getDimensionPixelSize(
                 R.dimen.ntp_wide_card_lateral_margins);
         mMarginResizer = new MarginResizer(itemView, config, 0, wideLateralMargin);
+
+        mTitleView = itemView.findViewById(R.id.header_title);
+        mIconView = itemView.findViewById(R.id.header_icon);
     }
 
     public void onBindViewHolder(SectionHeader header) {
-        ((TextView) itemView).setText(header.getHeaderText());
+        mHeader = header;
+        itemView.setOnClickListener(header.isExpandable() ? this : null);
+        mTitleView.setText(header.getHeaderText());
+        updateIconDrawable();
+        if (ChromeFeatureList.isEnabled(
+                    ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)) {
+            mIconView.setVisibility(header.isExpandable() ? View.VISIBLE : View.GONE);
+        }
+
         updateDisplay(0, false);
         mMarginResizer.attach();
     }
@@ -43,9 +67,16 @@ public class SectionHeaderViewHolder extends NewTabPageViewHolder {
     @Override
     public void recycle() {
         mMarginResizer.detach();
+        mHeader = null;
         super.recycle();
     }
 
+    @Override
+    public void onClick(View view) {
+        assert mHeader.isExpandable() : "onClick() is called on a non-expandable section header.";
+        mHeader.toggleHeader();
+    }
+
     /**
      * @return The header height we want to set.
      */
@@ -78,4 +109,21 @@ public class SectionHeaderViewHolder extends NewTabPageViewHolder {
         // below the fold for example.
         itemView.requestLayout();
     }
+
+    /**
+     * Update the image resource for the icon view based on whether the header is expanded.
+     */
+    private void updateIconDrawable() {
+        if (!mHeader.isExpandable()) return;
+        mIconView.setImageResource(
+                mHeader.isExpanded() ? R.drawable.ic_collapsed : R.drawable.ic_expanded);
+    }
+
+    /**
+     * Triggers an update to the icon drawable. Intended to be used as
+     * {@link NewTabPageViewHolder.PartialBindCallback}
+     */
+    static void updateIconDrawable(NewTabPageViewHolder holder) {
+        ((SectionHeaderViewHolder) holder).updateIconDrawable();
+    }
 }

chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java

@@ -99,7 +99,8 @@ import java.util.List;
 @RunWith(BaseRobolectricTestRunner.class)
 @Config(manifest = Config.NONE, shadows = {CustomShadowAsyncTask.class})
 @DisableFeatures({ChromeFeatureList.NTP_CONDENSED_LAYOUT, ChromeFeatureList.CHROME_HOME,
-        ChromeFeatureList.CONTENT_SUGGESTIONS_SCROLL_TO_LOAD})
+        ChromeFeatureList.CONTENT_SUGGESTIONS_SCROLL_TO_LOAD,
+        ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER})
 public class NewTabPageAdapterTest {
     @Rule
     public DisableHistogramsRule mDisableHistogramsRule = new DisableHistogramsRule();

chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/SectionListTest.java

@@ -38,6 +38,7 @@ import org.robolectric.annotation.Config;
 import org.chromium.base.Callback;
 import org.chromium.base.test.BaseRobolectricTestRunner;
 import org.chromium.base.test.util.Feature;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.DisableHistogramsRule;
 import org.chromium.chrome.browser.ntp.snippets.CategoryInt;
 import org.chromium.chrome.browser.ntp.snippets.CategoryStatus;
@@ -50,6 +51,7 @@ import org.chromium.chrome.browser.suggestions.SuggestionsEventReporter;
 import org.chromium.chrome.browser.suggestions.SuggestionsRanker;
 import org.chromium.chrome.browser.suggestions.SuggestionsUiDelegate;
 import org.chromium.chrome.test.util.browser.Features;
+import org.chromium.chrome.test.util.browser.Features.DisableFeatures;
 import org.chromium.chrome.test.util.browser.suggestions.ContentSuggestionsTestUtils.CategoryInfoBuilder;
 import org.chromium.chrome.test.util.browser.suggestions.FakeSuggestionsSource;
 import org.chromium.net.NetworkChangeNotifier;
@@ -62,6 +64,7 @@ import java.util.List;
  */
 @RunWith(BaseRobolectricTestRunner.class)
 @Config(manifest = Config.NONE)
+@DisableFeatures(ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)
 public class SectionListTest {
     @Rule
     public DisableHistogramsRule mDisableHistogramsRule = new DisableHistogramsRule();

chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/SuggestionsSectionTest.java

@@ -44,6 +44,7 @@ import org.chromium.base.Callback;
 import org.chromium.base.metrics.RecordUserAction;
 import org.chromium.base.test.BaseRobolectricTestRunner;
 import org.chromium.base.test.util.Feature;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.DisableHistogramsRule;
 import org.chromium.chrome.browser.ntp.cards.NewTabPageViewHolder.PartialBindCallback;
 import org.chromium.chrome.browser.ntp.snippets.CategoryStatus;
@@ -56,6 +57,7 @@ import org.chromium.chrome.browser.suggestions.SuggestionsNavigationDelegate;
 import org.chromium.chrome.browser.suggestions.SuggestionsRanker;
 import org.chromium.chrome.browser.suggestions.SuggestionsUiDelegate;
 import org.chromium.chrome.test.util.browser.Features;
+import org.chromium.chrome.test.util.browser.Features.DisableFeatures;
 import org.chromium.chrome.test.util.browser.offlinepages.FakeOfflinePageBridge;
 import org.chromium.chrome.test.util.browser.suggestions.ContentSuggestionsTestUtils.CategoryInfoBuilder;
 import org.chromium.chrome.test.util.browser.suggestions.FakeSuggestionsSource;
@@ -74,6 +76,7 @@ import java.util.TreeSet;
  */
 @RunWith(BaseRobolectricTestRunner.class)
 @Config(manifest = Config.NONE)
+@DisableFeatures(ChromeFeatureList.NTP_ARTICLE_SUGGESTIONS_EXPANDABLE_HEADER)
 public class SuggestionsSectionTest {
     @Rule
     public DisableHistogramsRule mDisableHistogramsRule = new DisableHistogramsRule();