[EoC] Add experimental alternate card layout

BUG=878013

Change-Id: Ieba7e71438fcc684d6ffc2aeaea138a2f062b7f6
Reviewed-on: https://chromium-review.googlesource.com/1191228Reviewed-by: Becky Zhou <huayinz@chromium.org>
Reviewed-by: Filip Gorski <fgorski@chromium.org>
Commit-Queue: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#586399}

chrome/android/java/res/drawable/contextual_suggestions_placeholder_thumbnail_alternate.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">
+    <solid
+        android:color="@color/placeholder_thumbnail_bg_color" />
+</shape>
\ No newline at end of file

chrome/android/java/res/layout/contextual_suggestions_card_modern_alternate.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. -->
+
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    style="@style/SuggestionCardModern"
+    android:background="@drawable/hairline_border_card_background"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingTop="20dp"
+    android:paddingStart="@dimen/snippets_padding"
+    android:paddingEnd="@dimen/snippets_padding"
+    android:paddingBottom="20dp">
+
+    <LinearLayout
+        tools:ignore="UseCompoundDrawables"
+        android:id="@+id/publisher_bar"
+        android:layout_alignParentTop="true"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="0dp"
+        android:layout_marginBottom="20dp"
+        android:orientation="horizontal">
+
+        <!-- The following attributes:
+             - publisher_bar's android:layout_width="wrap_content"
+             - article_publisher's android:layout_width="0dp"
+             - article_publisher's android:layout_weight="1"
+             - article_publisher's android:ellipsize="end"
+             - article_age's android:layout_width="wrap_content"
+             All ensure that when the publisher string is long, it starts to ellipsize
+             before pushing the article age string and the offline icon off the screen.
+             See: https://crbug.com/625775 and https://crbug.com/678568 -->
+        <TextView
+            android:id="@+id/article_publisher"
+            android:layout_width="0dp"
+            android:layout_weight="1"
+            android:layout_height="wrap_content"
+            android:drawablePadding="8dp"
+            android:maxLines="1"
+            android:singleLine="true"
+            android:ellipsize="end"
+            android:textAppearance="@style/BlackCaption"
+            android:textDirection="locale"
+            tools:text="chromium.org"/>
+
+        <TextView
+            android:id="@+id/article_age"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:maxLines="1"
+            android:textAppearance="@style/BlackCaption"
+            android:textDirection="locale"
+            tools:text=" - 3 hours ago" />
+
+        <!-- We can't add this ImageView as a CompoundDrawable to the TextView because we want to
+              have different paddings between the favicon (which is a compound drawable on the
+              TextView) and the offline icon. -->
+        <ImageView
+            android:id="@+id/offline_icon"
+            android:layout_width="@dimen/snippets_offline_icon_size"
+            android:layout_height="@dimen/snippets_offline_icon_size"
+            android:layout_marginStart="6dp"
+            android:contentDescription="@string/accessibility_ntp_offline_badge"
+            android:visibility="gone"
+            android:src="@drawable/offline_pin_round"
+            app:chrometint="@color/default_icon_color" />
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/text_layout"
+        android:layout_below="@+id/publisher_bar"
+        android:layout_toStartOf="@+id/article_thumbnail"
+        android:layout_alignWithParentIfMissing="true"
+        android:layout_height="wrap_content"
+        android:layout_width="wrap_content"
+        android:orientation="vertical">
+
+        <org.chromium.ui.widget.TextViewWithLeading
+            style="@style/SuggestionCardTitleModern"
+            app:leading="27dp"
+            android:id="@+id/article_headline"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            tools:text="Article headline" />
+
+       <org.chromium.ui.widget.TextViewWithLeading
+            style="@style/SuggestionCardBodyModern"
+            app:leading="23dp"
+            android:id="@+id/article_snippet"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            tools:text="Article snippet" />
+    </LinearLayout>
+
+    <ImageView
+        android:id="@+id/article_thumbnail"
+        android:layout_marginStart="@dimen/snippets_padding"
+        android:layout_width="96dp"
+        android:layout_height="96dp"
+        android:layout_below="@+id/publisher_bar"
+        android:layout_alignParentEnd="true"
+        android:scaleType="centerCrop"
+        tools:ignore="ContentDescription"
+        android:src="@null" />
+</RelativeLayout>

chrome/android/java/src/org/chromium/chrome/browser/ChromeFeatureList.java

@@ -192,6 +192,8 @@ public abstract class ChromeFeatureList {
             "ContextualSearchTapDisableOverride";
     public static final String CONTEXTUAL_SEARCH_UNITY_INTEGRATION =
             "ContextualSearchUnityIntegration";
+    public static final String CONTEXTUAL_SUGGESTIONS_ALTERNATE_CARD_LAYOUT =
+            "ContextualSuggestionsAlternateCardLayout";
     public static final String CONTEXTUAL_SUGGESTIONS_BOTTOM_SHEET =
             "ContextualSuggestionsBottomSheet";
     public static final String CONTEXTUAL_SUGGESTIONS_BUTTON = "ContextualSuggestionsButton";

chrome/android/java/src/org/chromium/chrome/browser/contextual_suggestions/ContextualSuggestionCardViewHolder.java

@@ -5,6 +5,7 @@
 package org.chromium.chrome.browser.contextual_suggestions;
 
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ChromeFeatureList;
 import org.chromium.chrome.browser.ntp.ContextMenuManager;
 import org.chromium.chrome.browser.ntp.snippets.SnippetArticleViewHolder;
 import org.chromium.chrome.browser.offlinepages.OfflinePageBridge;
@@ -19,7 +20,10 @@ public class ContextualSuggestionCardViewHolder extends SnippetArticleViewHolder
             ContextMenuManager contextMenuManager, SuggestionsUiDelegate uiDelegate,
             UiConfig uiConfig, OfflinePageBridge offlinePageBridge) {
         super(parent, contextMenuManager, uiDelegate, uiConfig, offlinePageBridge,
-                R.layout.contextual_suggestions_card_modern);
+                ChromeFeatureList.isEnabled(
+                        ChromeFeatureList.CONTEXTUAL_SUGGESTIONS_ALTERNATE_CARD_LAYOUT)
+                        ? R.layout.contextual_suggestions_card_modern_alternate
+                        : R.layout.contextual_suggestions_card_modern);
     }
 
     @Override

chrome/android/java/src/org/chromium/chrome/browser/suggestions/SuggestionsBinder.java

@@ -48,10 +48,12 @@ public class SuggestionsBinder {
     private static final int MAX_HEADER_LINES = 3;
     private static final int MAX_HEADER_LINES_WITH_SNIPPET = 2;
     private static final int MAX_SNIPPET_LINES = 3;
+    private static final int MAX_SNIPPET_LINES_ALTERNATE = 4;
 
     private final ImageFetcher mImageFetcher;
     private final SuggestionsUiDelegate mUiDelegate;
     private final boolean mIsContextual;
+    private final boolean mUseContextualAlternateCardLayout;
 
     private final View mCardContainerView;
     private final LinearLayout mTextLayout;
@@ -107,8 +109,11 @@ public class SuggestionsBinder {
         if (mIsContextual) {
             mThumbnailSize = mCardContainerView.getResources().getDimensionPixelSize(
                     R.dimen.snippets_thumbnail_size_small);
+            mUseContextualAlternateCardLayout = ChromeFeatureList.isEnabled(
+                    ChromeFeatureList.CONTEXTUAL_SUGGESTIONS_ALTERNATE_CARD_LAYOUT);
         } else {
             mThumbnailSize = getThumbnailSize(mCardContainerView.getResources());
+            mUseContextualAlternateCardLayout = false;
         }
 
         mSmallThumbnailCornerRadius = mCardContainerView.getResources().getDimensionPixelSize(
@@ -145,7 +150,7 @@ public class SuggestionsBinder {
         ViewGroup.MarginLayoutParams publisherBarParams =
                 (ViewGroup.MarginLayoutParams) mPublisherBar.getLayoutParams();
 
-        if (showHeadline) {
+        if (showHeadline && !mUseContextualAlternateCardLayout) {
             // When we show a headline and not a description, we reduce the top margin of the
             // publisher bar.
             publisherBarParams.topMargin = mPublisherBar.getResources().getDimensionPixelSize(
@@ -161,7 +166,9 @@ public class SuggestionsBinder {
 
         if (mSnippetTextView != null) {
             mSnippetTextView.setVisibility(showSnippet ? View.VISIBLE : View.GONE);
-            mSnippetTextView.setMaxLines(MAX_SNIPPET_LINES);
+            mSnippetTextView.setMaxLines(mUseContextualAlternateCardLayout
+                            ? MAX_SNIPPET_LINES_ALTERNATE
+                            : MAX_SNIPPET_LINES);
         }
     }
 
@@ -241,8 +248,9 @@ public class SuggestionsBinder {
         // Temporarily set placeholder and then fetch the thumbnail from a provider.
         mThumbnailView.setBackground(null);
         if (mIsContextual) {
-            mThumbnailView.setImageResource(
-                    R.drawable.contextual_suggestions_placeholder_thumbnail_background);
+            mThumbnailView.setImageResource(mUseContextualAlternateCardLayout
+                            ? R.drawable.contextual_suggestions_placeholder_thumbnail_alternate
+                            : R.drawable.contextual_suggestions_placeholder_thumbnail);
         } else if (SuggestionsConfig.useModernLayout()
                 && ChromeFeatureList.isEnabled(
                            ChromeFeatureList.CONTENT_SUGGESTIONS_THUMBNAIL_DOMINANT_COLOR)) {
@@ -421,8 +429,10 @@ public class SuggestionsBinder {
 
             Drawable drawable;
             if (mIsContextual) {
-                drawable = ViewUtils.createRoundedBitmapDrawable(
-                        thumbnail, mSmallThumbnailCornerRadius);
+                drawable = mUseContextualAlternateCardLayout
+                        ? new BitmapDrawable(mThumbnailView.getResources(), thumbnail)
+                        : ViewUtils.createRoundedBitmapDrawable(
+                                  thumbnail, mSmallThumbnailCornerRadius);
             } else {
                 drawable = ThumbnailGradient.createDrawableWithGradientIfNeeded(
                         thumbnail, mThumbnailView.getResources());

chrome/browser/about_flags.cc

@@ -2667,6 +2667,12 @@ const FeatureEntry kFeatureEntries[] = {
      flag_descriptions::kContextualSuggestionsButtonName,
      flag_descriptions::kContextualSuggestionsButtonDescription, kOsAndroid,
      FEATURE_VALUE_TYPE(contextual_suggestions::kContextualSuggestionsButton)},
+    {"enable-contextual-suggestions-alternate-card-layout",
+     flag_descriptions::kContextualSuggestionsAlternateCardLayoutName,
+     flag_descriptions::kContextualSuggestionsAlternateCardLayoutDescription,
+     kOsAndroid,
+     FEATURE_VALUE_TYPE(
+         contextual_suggestions::kContextualSuggestionsAlternateCardLayout)},
     {"contextual-suggestions-slim-peek-ui",
      flag_descriptions::kContextualSuggestionsSlimPeekUIName,
      flag_descriptions::kContextualSuggestionsSlimPeekUIDescription, kOsAndroid,

chrome/browser/android/chrome_feature_list.cc

@@ -48,6 +48,7 @@ namespace {
 const base::Feature* kFeaturesExposedToJava[] = {
     &autofill::kAutofillExpandedPopupViews,
     &autofill::kAutofillScanCardholderName,
+    &contextual_suggestions::kContextualSuggestionsAlternateCardLayout,
     &contextual_suggestions::kContextualSuggestionsBottomSheet,
     &contextual_suggestions::kContextualSuggestionsButton,
     &contextual_suggestions::kContextualSuggestionsSlimPeekUI,

chrome/browser/flag_descriptions.cc

@@ -225,6 +225,11 @@ const char kCompositedLayerBordersDescription[] =
     "Renders a border around composited Render Layers to help debug and study "
     "layer compositing.";
 
+const char kContextualSuggestionsAlternateCardLayoutName[] =
+    "Contextual Suggestions Alternate Card Layout";
+const char kContextualSuggestionsAlternateCardLayoutDescription[] =
+    "If enabled, use an alternate card layout for contextual suggestions.";
+
 const char kContextualSuggestionsBottomSheetName[] =
     "Contextual Suggestions Bottom Sheet";
 const char kContextualSuggestionsBottomSheetDescription[] =

chrome/browser/flag_descriptions.h

@@ -163,6 +163,9 @@ extern const char kForceColorProfileDescription[];
 extern const char kCompositedLayerBordersName[];
 extern const char kCompositedLayerBordersDescription[];
 
+extern const char kContextualSuggestionsAlternateCardLayoutName[];
+extern const char kContextualSuggestionsAlternateCardLayoutDescription[];
+
 extern const char kContextualSuggestionsBottomSheetName[];
 extern const char kContextualSuggestionsBottomSheetDescription[];
 

components/ntp_snippets/contextual/contextual_suggestions_features.cc

@@ -6,6 +6,10 @@
 
 namespace contextual_suggestions {
 
+const base::Feature kContextualSuggestionsAlternateCardLayout{
+    "ContextualSuggestionsAlternateCardLayout",
+    base::FEATURE_DISABLED_BY_DEFAULT};
+
 const base::Feature kContextualSuggestionsBottomSheet{
     "ContextualSuggestionsBottomSheet", base::FEATURE_DISABLED_BY_DEFAULT};
 

components/ntp_snippets/contextual/contextual_suggestions_features.h

@@ -9,6 +9,7 @@
 
 namespace contextual_suggestions {
 
+extern const base::Feature kContextualSuggestionsAlternateCardLayout;
 extern const base::Feature kContextualSuggestionsBottomSheet;
 extern const base::Feature kContextualSuggestionsButton;
 extern const base::Feature kContextualSuggestionsSlimPeekUI;

tools/metrics/histograms/enums.xml

@@ -28248,6 +28248,8 @@ from previous Chrome versions.
   <int value="-1543316040"
       label="DisplayPersistenceToggleInPermissionPrompts:disabled"/>
   <int value="-1538492024" label="OmniboxReverseAnswers:enabled"/>
+  <int value="-1537773844"
+      label="ContextualSuggestionsAlternateCardLayout:disabled"/>
   <int value="-1536293422" label="SharedArrayBuffer:enabled"/>
   <int value="-1536242739" label="security-chip"/>
   <int value="-1535758690" label="AutoplayIgnoreWebAudio:disabled"/>
@@ -30019,6 +30021,8 @@ from previous Chrome versions.
   <int value="2004483175" label="multi-instance-merge-tabs"/>
   <int value="2004829262" label="enable-webgl-draft-extensions"/>
   <int value="2005614493" label="tab-management-experiment-type-dill"/>
+  <int value="2006413281"
+      label="ContextualSuggestionsAlternateCardLayout:enabled"/>
   <int value="2014331873" label="NTPDownloadSuggestions:disabled"/>
   <int value="2014629801" label="view-passwords:disabled"/>
   <int value="2015335629" label="shelf-hover-previews"/>