New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 625628 link

Starred by 3 users
Status: Fixed
Owner:
█ dgn@chromium.org
Not on Chrome anymore
Closed: Jul 2016
Cc:
█ rachelis@chromium.org
█ nepper@chromium.org
█ ramyan@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug

Blocking:
issue 625135



Sign in to add a comment

Adjust the NTP UI for wide layouts

Project Member Reported by dgn@chromium.org, Jul 4 2016 
On tablets and phone landscape, the suggestion cards take the whole width of the screen, reserve 2 lines for both the title and the content, but don't fill them. This layout is very space inefficient and does not look great on such wide layouts.

Propositions to address that include using non full-width cards and dropping the fixed 2 text lines restriction.


Assigning to rachelis@ for now, waiting for a UX decision.
Screenshot_20160704-140959.png
339 KB View Download

Comment 1 by dgn@chromium.org, Jul 4 2016

Cc: rachelis@chromium.org
Labels: zine-mr-untriaged
Owner: dgn@chromium.org

Comment 2 by dgn@chromium.org, Jul 4 2016

Blocking: 625135

Comment 3 by dgn@chromium.org, Jul 4 2016 

First spec settled on breakpoint at 1024dp, with 24dp margins
Reference: https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints

The title and description should take up to 2 lines, instead of 2 lines at all times.

Comment 4 by nepper@chromium.org, Jul 8 2016

Labels: -zine-mr-untriaged zine-untriaged

Comment 5 by nepper@chromium.org, Jul 11 2016

Labels: -Pri-3 -zine-untriaged zine-client-v1 M-54 Pri-2
Status: Assigned (was: Untriaged)

Comment 6 by nepper@chromium.org, Jul 11 2016 

Issue 625135 has been merged into this issue.

Comment 7 by mvanouwe...@chromium.org, Jul 13 2016

Labels: zine-16-07-11
Status: Started (was: Assigned)
Project Member

Comment 8 by bugdroid1@chromium.org, Jul 21 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7c430bb62b6269b9f1bce082083e00324a26daee

commit 7c430bb62b6269b9f1bce082083e00324a26daee
Author: dgn <dgn@chromium.org>
Date: Thu Jul 21 18:54:51 2016

[NTP Snippets] Adjust the card display depending on the screen width.

Changes the lines to go from always 2 to at most 2 by default, so that
we don't show empty lines on very large screens.
For smaller screens, the title can go up to 4 lines, and we then hide
the description.
On bigger screens, we add space on the side of the cards

Measures used:
< 360dp: Narrow -> 4 lines title
>= 360dp: Regular -> 2 + 2 lines
>= 600dp: Wide -> 2 + 2 lines, 48dp gutters around the cards

Preview: https://goo.gl/photos/prJ42tvP4jzwiCn3A
BUG= 625628 , 624333

Review-Url: https://codereview.chromium.org/2149333003
Cr-Commit-Position: refs/heads/master@{#406923}

[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/res/layout/new_tab_page_snippets_card.xml
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/res/layout/new_tab_page_snippets_header.xml
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/res/values/dimens.xml
[add] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/DisplayStyleObserver.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/NewTabPageView.java
[add] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/UiConfig.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/CardViewHolder.java
[add] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/DisplayStyleObserverAdapter.java
[add] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/MarginResizer.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapter.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/StatusListItem.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetArticleViewHolder.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetHeaderViewHolder.java
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/java_sources.gni
[modify] https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee/chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java

Comment 9 by dgn@chromium.org, Jul 21 2016

Labels: zine-16-07-18
Status: Fixed (was: Started)
Project Member

Comment 10 by bugdroid1@chromium.org, Jul 21 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/91c4694ecfdd34810a9f267698c6f236ffefeac5

commit 91c4694ecfdd34810a9f267698c6f236ffefeac5
Author: dbeam <dbeam@chromium.org>
Date: Thu Jul 21 20:16:10 2016

Revert of 📰 Adjust the card display depending on the screen width. (patchset #8 id:140001 of https://codereview.chromium.org/2149333003/ )

Reason for revert:
Broke Android compile:

util.build_utils.CalledProcessError: Command failed: ( cd /mnt/data/b/c/b/Android_Arm64_Builder__dbg_/src/out/Debug; javac -g -encoding UTF-8 -classpath lib.java/chrome/android/chrome_java.interface.jar:lib.java/base/base_java.interface.jar:lib.java/base/base_java_test_support.interface.jar:lib.java/base/base_junit_test_support.interface.jar:lib.java/components/bookmarks/common/android/bookmarks_java.interface.jar:lib.java/components/invalidation/impl/java.interface.jar:lib.java/components/web_restrictions/web_restrictions_java.interface.jar:lib.java/content/public/android/content_java.interface.jar:lib.java/net/android/net_java.interface.jar:lib.java/sync/sync_java_test_support.interface.jar:lib.java/sync/android/sync_java.interface.jar:lib.java/third_party/WebKit/public/blink_headers_java.interface.jar:lib.java/third_party/android_tools/android_support_v7_mediarouter_java__jar_1.interface.jar:lib.java/third_party/android_tools/android_support_v7_mediarouter_java__jar_2.interface.jar:lib.java/third_party/android_tools/android_support_v7_recyclerview_java__jar_1.interface.jar:lib.java/third_party/cacheinvalidation/cacheinvalidation_javalib.interface.jar:lib.java/third_party/junit/hamcrest.interface.jar:lib.java/ui/android/ui_java.interface.jar:lib.java/third_party/android_tools/google_play_services_default_java.interface.jar:lib.java/testing/android/junit/junit_test_support.interface.jar:lib.java/third_party/junit/junit.interface.jar:lib.java/third_party/mockito/mockito_java.interface.jar:lib.java/third_party/robolectric/android-all-4.3_r2-robolectric-0.interface.jar:lib.java/third_party/robolectric/robolectric_java.interface.jar -sourcepath '' -Xlint:unchecked -Xlint:deprecation -d /tmp/tmphznxR6/classes ../../chrome/android/junit/src/org/chromium/chrome/browser/ChromeBackupAgentTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/ChromeBackgroundServiceWaiterTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/ShortcutHelperTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/SSLClientCertificateRequestTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/compositor/overlays/strip/StripLayoutHelperTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/contextualsearch/ContextualSearchSelectionControllerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/cookies/CanonicalCookieTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/crash/LogcatExtractionCallableTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/externalauth/ExternalAuthUtilsTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/firstrun/FirstRunFlowSequencerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/gcore/GoogleApiClientHelperTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/invalidation/InvalidationControllerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/remote/AbstractMediaRouteControllerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/remote/MediaUrlResolverTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/remote/RemoteVideoInfoTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/ChromeMediaRouterRouteTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/ChromeMediaRouterSinkObservationTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/ChromeMediaRouterTestBase.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/cast/CastMessageHandlerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/cast/DiscoveryCallbackTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/cast/JSONTestUtils.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/cast/MediaSourceTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/media/router/cast/TestUtils.java ../../chrome/android/junit/src/org/chromium/chrome/browser/notifications/NotificationPlatformBridgeTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/ntp/NativePageFactoryTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/ntp/TitleUtilTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/BackgroundSchedulerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/BackgroundOfflinerTaskTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/ClientIdTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/OfflinePageBridgeTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/OfflinePageTabObserverTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/OfflinePageUtilsTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/ShadowGcmNetworkManager.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/StubBackgroundSchedulerProcessor.java ../../chrome/android/junit/src/org/chromium/chrome/browser/offlinepages/TaskExtrasPackerTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/omaha/ResponseParserTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/omaha/VersionNumberTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/payments/AutofillContactTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/payments/CurrencyStringFormatterTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/snackbar/SnackbarCollectionUnitTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/superviseduser/SupervisedUserContentProviderUnitTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/tabstate/TabStateUnitTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/util/NonThreadSafeTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/webapps/WebappDataStorageTest.java ../../chrome/android/junit/src/org/chromium/chrome/browser/webapps/WebappRegistryTest.java /tmp/tmphznxR6/java/android/support/v7/recyclerview/R.java /tmp/tmphznxR6/java/android/support/v7/appcompat/R.java /tmp/tmphznxR6/java/android/support/v7/mediarouter/R.java /tmp/tmphznxR6/java/android/support/design/R.java /tmp/tmphznxR6/java/com/google/android/gms/R.java /tmp/tmphznxR6/java/org/chromium/ui/R.java /tmp/tmphznxR6/java/org/chromium/content/R.java /tmp/tmphznxR6/java/org/chromium/components/web_contents_delegate_android/R.java /tmp/tmphznxR6/java/org/chromium/chrome/R.java /tmp/tmphznxR6/java/org/chromium/third_party/android/R.java /tmp/tmphznxR6/java/org/chromium/third_party/android/media/R.java )
../../chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java:162: error: constructor NewTabPageAdapter in class NewTabPageAdapter cannot be applied to given types;
        NewTabPageAdapter ntpa = new NewTabPageAdapter(mNewTabPageManager, null, mSnippetsBridge);
                                 ^
  required: NewTabPageManager,NewTabPageLayout,SnippetsBridge,UiConfig
  found: NewTabPageManager,<null>,SnippetsBridge
  reason: actual and formal argument lists differ in length

https://build.chromium.org/p/chromium.linux/builders/Android%20Builder/builds/70053/steps/compile/logs/stdio

Original issue's description:
> [NTP Snippets] Adjust the card display depending on the screen width.
>
> Changes the lines to go from always 2 to at most 2 by default, so that
> we don't show empty lines on very large screens.
> For smaller screens, the title can go up to 4 lines, and we then hide
> the description.
> On bigger screens, we add space on the side of the cards
>
> Measures used:
> < 360dp: Narrow -> 4 lines title
> >= 360dp: Regular -> 2 + 2 lines
> >= 600dp: Wide -> 2 + 2 lines, 48dp gutters around the cards
>
> Preview: https://goo.gl/photos/prJ42tvP4jzwiCn3A
> BUG= 625628 , 624333
>
> Committed: https://crrev.com/7c430bb62b6269b9f1bce082083e00324a26daee
> Cr-Commit-Position: refs/heads/master@{#406923}

TBR=bauerb@chromium.org,mvanouwerkerk@chromium.org,peconn@chromium.org,dgn@chromium.org
# Skipping CQ checks because original CL landed less than 1 days ago.
NOPRESUBMIT=true
NOTREECHECKS=true
NOTRY=true
BUG= 625628 , 624333

Review-Url: https://codereview.chromium.org/2167973004
Cr-Commit-Position: refs/heads/master@{#406932}

[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/res/layout/new_tab_page_snippets_card.xml
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/res/layout/new_tab_page_snippets_header.xml
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/res/values/dimens.xml
[delete] https://crrev.com/5f1f5e67ac7cb8c7ff24e453a86c0413092f1acd/chrome/android/java/src/org/chromium/chrome/browser/ntp/DisplayStyleObserver.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/NewTabPageView.java
[delete] https://crrev.com/5f1f5e67ac7cb8c7ff24e453a86c0413092f1acd/chrome/android/java/src/org/chromium/chrome/browser/ntp/UiConfig.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/CardViewHolder.java
[delete] https://crrev.com/5f1f5e67ac7cb8c7ff24e453a86c0413092f1acd/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/DisplayStyleObserverAdapter.java
[delete] https://crrev.com/5f1f5e67ac7cb8c7ff24e453a86c0413092f1acd/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/MarginResizer.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapter.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/StatusListItem.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetArticleViewHolder.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetHeaderViewHolder.java
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/java_sources.gni
[modify] https://crrev.com/91c4694ecfdd34810a9f267698c6f236ffefeac5/chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java
Project Member

Comment 11 by bugdroid1@chromium.org, Jul 22 2016 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/605765aa7ec33ddca865b46f92892ba3b71da54e

commit 605765aa7ec33ddca865b46f92892ba3b71da54e
Author: dgn <dgn@chromium.org>
Date: Fri Jul 22 10:09:19 2016

[NTP Client][Reland]Adjust the card display depending on the screen width.

Original issue's description:
> Changes the lines to go from always 2 to at most 2 by default, so that
> we don't show empty lines on very large screens.
> For smaller screens, the title can go up to 4 lines, and we then hide
> the description.
> On bigger screens, we add space on the side of the cards
>
> Measures used:
> < 360dp: Narrow -> 4 lines title
> >= 360dp: Regular -> 2 + 2 lines
> >= 600dp: Wide -> 2 + 2 lines, 48dp gutters around the cards
>
> Preview: https://goo.gl/photos/prJ42tvP4jzwiCn3A

Was reverted as https://codereview.chromium.org/2167973004/

Reason for revert:
> Broke Android compile:
> NewTabPageAdapterTest.java:162: error: constructor NewTabPageAdapter in
>   class NewTabPageAdapter cannot be applied to given types;
>   NewTabPageAdapter ntpa = new NewTabPageAdapter(mNewTabPageManager, null, mSnippetsBridge);
>                                  ^
>   required: NewTabPageManager,NewTabPageLayout,SnippetsBridge,UiConfig
>   found: NewTabPageManager,<null>,SnippetsBridge
>   reason: actual and formal argument lists differ in length

TBR=bauerb@chromium.org,mvanouwerkerk@chromium.org,peconn@chromium.org,dbeam@chromium.org
# Skipping CQ checks because original CL landed less than 1 days ago.
BUG= 625628 , 624333

Review-Url: https://codereview.chromium.org/2173723002
Cr-Commit-Position: refs/heads/master@{#407121}

[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/res/layout/new_tab_page_snippets_card.xml
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/res/layout/new_tab_page_snippets_header.xml
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/res/values/dimens.xml
[add] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/DisplayStyleObserver.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/NewTabPageView.java
[add] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/UiConfig.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/CardViewHolder.java
[add] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/DisplayStyleObserverAdapter.java
[add] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/MarginResizer.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapter.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/cards/StatusListItem.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetArticleViewHolder.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java/src/org/chromium/chrome/browser/ntp/snippets/SnippetHeaderViewHolder.java
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/java_sources.gni
[modify] https://crrev.com/605765aa7ec33ddca865b46f92892ba3b71da54e/chrome/android/junit/src/org/chromium/chrome/browser/ntp/cards/NewTabPageAdapterTest.java
►

Sign in to add a comment