Commit 8e44a713 authored by Theresa's avatar Theresa Committed by Commit Bot

[Modern] Add experiment arm for alternate NTP card layout

Add an experiment arm for an alternate NTP card layout that swaps the
article thumbnail back to the end of the card.

Also increase the font size and decrease the space between cards for
Modern in general.

BUG=852163

Change-Id: Ie0c133befbb96308fc0caf08e1e9d7bc025ef079
Reviewed-on: https://chromium-review.googlesource.com/1101833
Commit-Queue: Theresa <twellington@chromium.org>
Reviewed-by: default avatarTed Choc <tedchoc@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567717}
parent 9f716548
<?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. -->
<!-- Note: hand-tweaked for foreground and background colors, not canonical icon. -->
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:targetApi="21"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/transparent"
android:pathData="M 6,6 H 18 V 18 H 6 z" />
<path
android:fillColor="#757575"
android:pathData="M 12,2 C 6.475,2 2,6.475 2,12 2,17.525 6.475,22 12,22 17.525,22 22,17.525
22,12 22,6.475 17.525,2 12,2 z M 9.9999998,16.5 v -9 L 16,12 9.9999998,16.5 z" />
</vector>
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<org.chromium.chrome.browser.widget.TintedImageView <org.chromium.chrome.browser.widget.TintedImageView
android:id="@+id/article_thumbnail" android:id="@+id/article_thumbnail"
android:layout_width="@dimen/snippets_thumbnail_size_modern" android:layout_width="@dimen/snippets_thumbnail_size"
android:layout_height="@dimen/snippets_thumbnail_size_modern" android:layout_height="@dimen/snippets_thumbnail_size"
android:layout_alignParentTop="true" android:layout_alignParentTop="true"
android:layout_alignParentStart="true" android:layout_alignParentStart="true"
android:scaleType="centerCrop" android:scaleType="centerCrop"
......
<?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:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- This layout is nested inside another layout so that we can align the thumbnail corners
relative to it. The corners are aligned with respect to the whole card, in case the card
contents are taller than the thumbnail. -->
<RelativeLayout
android:id="@+id/card_contents"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/text_layout"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_toStartOf="@+id/article_thumbnail"
android:layout_alignWithParentIfMissing="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="@dimen/snippets_padding"
android:orientation="vertical">
<org.chromium.ui.widget.TextViewWithLeading
style="@style/SuggestionCardTitleModern"
android:id="@+id/article_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Article headline" />
<LinearLayout
tools:ignore="UseCompoundDrawables"
android:id="@+id/publisher_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/snippets_publisher_margin_top"
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:textSize="12sp"
android:textColor="@color/snippets_publisher_name_color"
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:textSize="12sp"
android:textColor="@color/snippets_publisher_name_color"
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:src="@drawable/offline_pin_round"
android:contentDescription="@string/accessibility_ntp_offline_badge"
android:visibility="gone"
tools:tint="@color/black_alpha_54" />
<ImageView
android:id="@+id/video_badge"
android:layout_width="@dimen/snippets_offline_icon_size"
android:layout_height="@dimen/snippets_offline_icon_size"
android:layout_marginStart="6dp"
android:contentDescription="@string/accessibility_suggestion_with_video_badge"
android:visibility="gone"
app:srcCompat="@drawable/ic_play_circle_filled_grey"
tools:src="@drawable/ic_play_circle_filled_grey" />
</LinearLayout>
</LinearLayout>
<org.chromium.chrome.browser.widget.TintedImageView
android:id="@+id/article_thumbnail"
android:layout_width="@dimen/snippets_thumbnail_size"
android:layout_height="@dimen/snippets_thumbnail_size"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
android:contentDescription="@null"
android:src="@null"
tools:src="@drawable/ic_snippet_thumbnail_placeholder" />
</RelativeLayout>
<!-- It would have been nice to use RoundedBitmapDrawable on the thumbnail, but with that you
cannot select which corners must be rounded, they are all rounded. -->
<ImageView
android:id="@+id/corner_top"
android:layout_width="@dimen/content_suggestions_card_modern_corner_radius"
android:layout_height="@dimen/content_suggestions_card_modern_corner_radius"
android:layout_alignTop="@id/card_contents"
android:layout_alignParentEnd="true"
android:contentDescription="@null"
android:scaleX="@integer/automirror_scale_x_reverse"
app:srcCompat="@drawable/content_suggestions_card_corner_top" />
<ImageView
android:id="@+id/corner_bottom"
android:layout_width="@dimen/content_suggestions_card_modern_corner_radius"
android:layout_height="@dimen/content_suggestions_card_modern_corner_radius"
android:layout_alignBottom="@id/card_contents"
android:layout_alignParentEnd="true"
android:contentDescription="@null"
android:scaleX="@integer/automirror_scale_x_reverse"
app:srcCompat="@drawable/content_suggestions_card_corner_bottom" />
</RelativeLayout>
...@@ -9,4 +9,5 @@ ...@@ -9,4 +9,5 @@
<!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. --> <!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. -->
<integer name="automirror_scale_x">-1</integer> <integer name="automirror_scale_x">-1</integer>
<integer name="automirror_scale_x_reverse">1</integer>
</resources> </resources>
\ No newline at end of file
...@@ -745,9 +745,9 @@ ...@@ -745,9 +745,9 @@
<item name="android:background">@drawable/content_card_modern_background</item> <item name="android:background">@drawable/content_card_modern_background</item>
<item name="android:foreground">@drawable/button_borderless_compat</item> <item name="android:foreground">@drawable/button_borderless_compat</item>
</style> </style>
<style name="SuggestionCardTitleModern" parent="BlackBodyDefault"> <style name="SuggestionCardTitleModern" parent="BlackTitle1">
<item name="android:ellipsize">end</item> <item name="android:ellipsize">end</item>
<item name="leading">16sp</item> <item name="leading">20sp</item>
</style> </style>
<style name="SuggestionCardBodyModern" parent="BlackBody"> <style name="SuggestionCardBodyModern" parent="BlackBody">
<item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginTop">8dp</item>
......
...@@ -355,7 +355,6 @@ ...@@ -355,7 +355,6 @@
<dimen name="ntp_sign_in_promo_margin_top">20dp</dimen> <dimen name="ntp_sign_in_promo_margin_top">20dp</dimen>
<dimen name="ntp_progress_indicator_diameter">56dp</dimen> <dimen name="ntp_progress_indicator_diameter">56dp</dimen>
<dimen name="snippets_thumbnail_size">124dp</dimen> <dimen name="snippets_thumbnail_size">124dp</dimen>
<dimen name="snippets_thumbnail_size_modern">114dp</dimen>
<dimen name="snippets_thumbnail_size_small">72dp</dimen> <dimen name="snippets_thumbnail_size_small">72dp</dimen>
<dimen name="snippets_thumbnail_small_corner_radius">8dp</dimen> <dimen name="snippets_thumbnail_small_corner_radius">8dp</dimen>
<!-- The default padding for the peeking card and the amount the card peeks by in the current <!-- The default padding for the peeking card and the amount the card peeks by in the current
...@@ -371,8 +370,8 @@ ...@@ -371,8 +370,8 @@
<dimen name="ntp_suggestions_footer_padding_bottom">18dp</dimen> <dimen name="ntp_suggestions_footer_padding_bottom">18dp</dimen>
<dimen name="modern_suggestions_footer_padding_top">24dp</dimen> <dimen name="modern_suggestions_footer_padding_top">24dp</dimen>
<dimen name="modern_suggestions_footer_padding_bottom">24dp</dimen> <dimen name="modern_suggestions_footer_padding_bottom">24dp</dimen>
<dimen name="content_suggestions_card_modern_margin">16dp</dimen> <dimen name="content_suggestions_card_modern_margin">12dp</dimen>
<dimen name="content_suggestions_card_modern_corner_radius">10dp</dimen> <dimen name="content_suggestions_card_modern_corner_radius">8dp</dimen>
<dimen name="content_suggestions_card_modern_badge_size">18dp</dimen> <dimen name="content_suggestions_card_modern_badge_size">18dp</dimen>
<dimen name="content_suggestions_card_modern_badge_margin_start">8dp</dimen> <dimen name="content_suggestions_card_modern_badge_margin_start">8dp</dimen>
<dimen name="content_suggestions_card_modern_badge_margin_top">8dp</dimen> <dimen name="content_suggestions_card_modern_badge_margin_top">8dp</dimen>
......
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
<!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. --> <!-- Value for scaleX to mirror drawables correctly for LTR / RTL layouts. -->
<integer name="automirror_scale_x">1</integer> <integer name="automirror_scale_x">1</integer>
<integer name="automirror_scale_x_reverse">-1</integer>
<!-- Modern List Item --> <!-- Modern List Item -->
<integer name="list_item_level_default">0</integer> <integer name="list_item_level_default">0</integer>
......
...@@ -165,6 +165,8 @@ public abstract class ChromeFeatureList { ...@@ -165,6 +165,8 @@ public abstract class ChromeFeatureList {
// TODO(mdjones): Remove CHROME_HOME_SWIPE_VELOCITY_FEATURE or rename. // TODO(mdjones): Remove CHROME_HOME_SWIPE_VELOCITY_FEATURE or rename.
public static final String CHROME_HOME_SWIPE_VELOCITY_FEATURE = "ChromeHomeSwipeLogicVelocity"; public static final String CHROME_HOME_SWIPE_VELOCITY_FEATURE = "ChromeHomeSwipeLogicVelocity";
public static final String CHROME_MEMEX = "ChromeMemex"; public static final String CHROME_MEMEX = "ChromeMemex";
public static final String CHROME_MODERN_ALTERNATE_CARD_LAYOUT =
"ChromeModernAlternateCardLayout";
public static final String CHROME_MODERN_DESIGN = "ChromeModernDesign"; public static final String CHROME_MODERN_DESIGN = "ChromeModernDesign";
public static final String CHROME_SMART_SELECTION = "ChromeSmartSelection"; public static final String CHROME_SMART_SELECTION = "ChromeSmartSelection";
public static final String CLEAR_OLD_BROWSING_DATA = "ClearOldBrowsingData"; public static final String CLEAR_OLD_BROWSING_DATA = "ClearOldBrowsingData";
......
...@@ -8,6 +8,7 @@ import android.support.annotation.LayoutRes; ...@@ -8,6 +8,7 @@ import android.support.annotation.LayoutRes;
import org.chromium.base.VisibleForTesting; import org.chromium.base.VisibleForTesting;
import org.chromium.chrome.R; import org.chromium.chrome.R;
import org.chromium.chrome.browser.ChromeFeatureList;
import org.chromium.chrome.browser.metrics.ImpressionTracker; import org.chromium.chrome.browser.metrics.ImpressionTracker;
import org.chromium.chrome.browser.ntp.ContextMenuManager; import org.chromium.chrome.browser.ntp.ContextMenuManager;
import org.chromium.chrome.browser.ntp.ContextMenuManager.ContextMenuItemId; import org.chromium.chrome.browser.ntp.ContextMenuManager.ContextMenuItemId;
...@@ -210,6 +211,10 @@ public class SnippetArticleViewHolder extends CardViewHolder { ...@@ -210,6 +211,10 @@ public class SnippetArticleViewHolder extends CardViewHolder {
@LayoutRes @LayoutRes
private static int getLayout() { private static int getLayout() {
if (SuggestionsConfig.useModernLayout()) { if (SuggestionsConfig.useModernLayout()) {
if (ChromeFeatureList.isEnabled(
ChromeFeatureList.CHROME_MODERN_ALTERNATE_CARD_LAYOUT)) {
return R.layout.content_suggestions_card_modern_reversed;
}
return R.layout.content_suggestions_card_modern; return R.layout.content_suggestions_card_modern;
} }
return R.layout.new_tab_page_snippets_card_large_thumbnail; return R.layout.new_tab_page_snippets_card_large_thumbnail;
......
...@@ -14,7 +14,6 @@ import android.graphics.drawable.TransitionDrawable; ...@@ -14,7 +14,6 @@ import android.graphics.drawable.TransitionDrawable;
import android.media.ThumbnailUtils; import android.media.ThumbnailUtils;
import android.os.StrictMode; import android.os.StrictMode;
import android.os.SystemClock; import android.os.SystemClock;
import android.support.annotation.DimenRes;
import android.support.annotation.Nullable; import android.support.annotation.Nullable;
import android.support.v4.text.BidiFormatter; import android.support.v4.text.BidiFormatter;
import android.text.TextUtils; import android.text.TextUtils;
...@@ -450,13 +449,6 @@ public class SuggestionsBinder { ...@@ -450,13 +449,6 @@ public class SuggestionsBinder {
} }
private static int getThumbnailSize(Resources resources) { private static int getThumbnailSize(Resources resources) {
@DimenRes return resources.getDimensionPixelSize(R.dimen.snippets_thumbnail_size);
final int dimension;
if (SuggestionsConfig.useModernLayout()) {
dimension = R.dimen.snippets_thumbnail_size_modern;
} else {
dimension = R.dimen.snippets_thumbnail_size;
}
return resources.getDimensionPixelSize(dimension);
} }
} }
...@@ -1873,6 +1873,10 @@ const FeatureEntry kFeatureEntries[] = { ...@@ -1873,6 +1873,10 @@ const FeatureEntry kFeatureEntries[] = {
{"enable-chrome-modern-design", flag_descriptions::kChromeModernDesignName, {"enable-chrome-modern-design", flag_descriptions::kChromeModernDesignName,
flag_descriptions::kChromeModernDesignDescription, kOsAndroid, flag_descriptions::kChromeModernDesignDescription, kOsAndroid,
FEATURE_VALUE_TYPE(chrome::android::kChromeModernDesign)}, FEATURE_VALUE_TYPE(chrome::android::kChromeModernDesign)},
{"enable-chrome-modern-alternate-card-layout",
flag_descriptions::kChromeModernAlternateCardLayoutName,
flag_descriptions::kChromeModernAlternateCardLayoutDescription, kOsAndroid,
FEATURE_VALUE_TYPE(chrome::android::kChromeModernAlternateCardLayout)},
{"force-enable-home-page-button", flag_descriptions::kHomePageButtonName, {"force-enable-home-page-button", flag_descriptions::kHomePageButtonName,
flag_descriptions::kHomePageButtonDescription, kOsAndroid, flag_descriptions::kHomePageButtonDescription, kOsAndroid,
FEATURE_VALUE_TYPE(chrome::android::kHomePageButtonForceEnabled)}, FEATURE_VALUE_TYPE(chrome::android::kHomePageButtonForceEnabled)},
......
...@@ -80,6 +80,7 @@ const base::Feature* kFeaturesExposedToJava[] = { ...@@ -80,6 +80,7 @@ const base::Feature* kFeaturesExposedToJava[] = {
&kChromeHomeSwipeLogicVelocity, &kChromeHomeSwipeLogicVelocity,
&kChromeSmartSelection, &kChromeSmartSelection,
&kChromeMemexFeature, &kChromeMemexFeature,
&kChromeModernAlternateCardLayout,
&kChromeModernDesign, &kChromeModernDesign,
&kCommandLineOnNonRooted, &kCommandLineOnNonRooted,
&kContentSuggestionsScrollToLoad, &kContentSuggestionsScrollToLoad,
...@@ -209,6 +210,9 @@ const base::Feature kChromeHomeSwipeLogicVelocity{ ...@@ -209,6 +210,9 @@ const base::Feature kChromeHomeSwipeLogicVelocity{
const base::Feature kChromeMemexFeature{"ChromeMemex", const base::Feature kChromeMemexFeature{"ChromeMemex",
base::FEATURE_DISABLED_BY_DEFAULT}; base::FEATURE_DISABLED_BY_DEFAULT};
const base::Feature kChromeModernAlternateCardLayout{
"ChromeModernAlternateCardLayout", base::FEATURE_DISABLED_BY_DEFAULT};
const base::Feature kChromeModernDesign{"ChromeModernDesign", const base::Feature kChromeModernDesign{"ChromeModernDesign",
base::FEATURE_DISABLED_BY_DEFAULT}; base::FEATURE_DISABLED_BY_DEFAULT};
......
...@@ -26,6 +26,7 @@ extern const base::Feature kChromeDuplexFeature; ...@@ -26,6 +26,7 @@ extern const base::Feature kChromeDuplexFeature;
extern const base::Feature kChromeHomeSwipeLogic; extern const base::Feature kChromeHomeSwipeLogic;
extern const base::Feature kChromeHomeSwipeLogicVelocity; extern const base::Feature kChromeHomeSwipeLogicVelocity;
extern const base::Feature kChromeMemexFeature; extern const base::Feature kChromeMemexFeature;
extern const base::Feature kChromeModernAlternateCardLayout;
extern const base::Feature kChromeModernDesign; extern const base::Feature kChromeModernDesign;
extern const base::Feature kChromeSmartSelection; extern const base::Feature kChromeSmartSelection;
extern const base::Feature kCommandLineOnNonRooted; extern const base::Feature kCommandLineOnNonRooted;
......
...@@ -2009,6 +2009,11 @@ const char kChromeHomeSwipeLogicDescription[] = ...@@ -2009,6 +2009,11 @@ const char kChromeHomeSwipeLogicDescription[] =
const char kChromeHomeSwipeLogicRestrictArea[] = "Restrict swipable area"; const char kChromeHomeSwipeLogicRestrictArea[] = "Restrict swipable area";
const char kChromeHomeSwipeLogicVelocity[] = "Velocity suppression model"; const char kChromeHomeSwipeLogicVelocity[] = "Velocity suppression model";
const char kChromeModernAlternateCardLayoutName[] =
"Chrome Modern Alternate Card Layout";
const char kChromeModernAlternateCardLayoutDescription[] =
"Enable the alternate card layout for Chrome Modern Design.";
const char kChromeModernDesignName[] = "Chrome Modern Design"; const char kChromeModernDesignName[] = "Chrome Modern Design";
const char kChromeModernDesignDescription[] = const char kChromeModernDesignDescription[] =
"Enable modern design for Chrome. Chrome must be restarted twice for this " "Enable modern design for Chrome. Chrome must be restarted twice for this "
......
...@@ -1226,6 +1226,9 @@ extern const char kChromeHomeSwipeLogicDescription[]; ...@@ -1226,6 +1226,9 @@ extern const char kChromeHomeSwipeLogicDescription[];
extern const char kChromeHomeSwipeLogicRestrictArea[]; extern const char kChromeHomeSwipeLogicRestrictArea[];
extern const char kChromeHomeSwipeLogicVelocity[]; extern const char kChromeHomeSwipeLogicVelocity[];
extern const char kChromeModernAlternateCardLayoutName[];
extern const char kChromeModernAlternateCardLayoutDescription[];
extern const char kChromeModernDesignName[]; extern const char kChromeModernDesignName[];
extern const char kChromeModernDesignDescription[]; extern const char kChromeModernDesignDescription[];
......
...@@ -28632,6 +28632,7 @@ from previous Chrome versions. ...@@ -28632,6 +28632,7 @@ from previous Chrome versions.
<int value="1878331098" label="GuestViewCrossProcessFrames:enabled"/> <int value="1878331098" label="GuestViewCrossProcessFrames:enabled"/>
<int value="1881036528" label="disable-multilingual-spellchecker"/> <int value="1881036528" label="disable-multilingual-spellchecker"/>
<int value="1881174782" label="disable-brotli"/> <int value="1881174782" label="disable-brotli"/>
<int value="1888812860" label="ChromeModernAlternateCardLayout:enabled"/>
<int value="1889076955" label="disable-app-link"/> <int value="1889076955" label="disable-app-link"/>
<int value="1891210939" label="enable-blink-features"/> <int value="1891210939" label="enable-blink-features"/>
<int value="1892201400" label="enable-password-separated-signin-flow"/> <int value="1892201400" label="enable-password-separated-signin-flow"/>
...@@ -28647,6 +28648,7 @@ from previous Chrome versions. ...@@ -28647,6 +28648,7 @@ from previous Chrome versions.
<int value="1910240042" label="enable-experimental-fullscreen-exit-ui"/> <int value="1910240042" label="enable-experimental-fullscreen-exit-ui"/>
<int value="1913263516" label="OculusVR:enabled"/> <int value="1913263516" label="OculusVR:enabled"/>
<int value="1913298816" label="OverlayScrollbar:enabled"/> <int value="1913298816" label="OverlayScrollbar:enabled"/>
<int value="1913926782" label="ChromeModernAlternateCardLayout:disabled"/>
<int value="1915178511" label="disable-blink-features"/> <int value="1915178511" label="disable-blink-features"/>
<int value="1925627218" label="FullscreenToolbarReveal:disabled"/> <int value="1925627218" label="FullscreenToolbarReveal:disabled"/>
<int value="1927259098" label="TranslateLanguageByULP:enabled"/> <int value="1927259098" label="TranslateLanguageByULP:enabled"/>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment