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

Issue 854093 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Closed: Jul 18
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 1
Type: Task
Q2



Sign in to add a comment

UX Request: Updated specs for NTP fakebox

Project Member Reported by stkhapugin@chromium.org, Jun 19 2018

Issue description

Given that 852787 changes the omnibox shape and font size, it seems necessary to provide updated specs for the NTP fakebox. Specifically:
- updated placeholder font size, fakebox in bottom position
- updated placeholder font size, fakebox when scrolled down
- what about pill shape?

Please reassign this to Justin when you are done.

Justin: Note that dynamically resizing the pill shape might be computationally intensive (i.e. frames might be dropped).
 

Comment 1 by sczs@chromium.org, Jun 20 2018

Status: Assigned (was: Untriaged)
pschaffner@ could you please confirm these specs? And then flip to Justin
Labels: Q2
pschaffner: Have you done/started this yet?
Labels: S-New-Tab-Faketoolbar MS-New-Tab
Owner: justincohen@chromium.org
- only show the magnifying glass icon in RxR size class (use the asset provided here https://bugs.chromium.org/p/chromium/issues/detail?id=821817#c22 in omnibox_completion_icons.zip called "omnibox_completion_search*.png")
- the only place the placeholder font-size should be adjusted is in CxR in the scrolled state, where it should match the size of the real omnibox which is 17pt at rest (it might already be good, just being explicit)
- the placeholder label should be center aligned everywhere (to match the resting state of the real omnibox)
- the placeholder color should match the that of the real omnibox placeholder (might already, just being explicit)
- the background should always be a pill shape (to match the real omnibox)
- the background color should be black @ 0.09 alpha (to match the real omnibox; see  Issue 862518 ) and should **not** be placed in the vibrancy content view
- the voice search icon should be the same used in the real omnibox [in RxR], tinted black @ 0.7 alpha (use "omnibox_voice*.png" found in share_and_voice_search_icons.zip here https://bugs.chromium.org/p/chromium/issues/detail?id=856542#c13)
Status: Started (was: Assigned)
Cc: pschaffner@chromium.org stkhapugin@chromium.org
 Issue 857455  has been merged into this issue.
Project Member

Comment 7 by bugdroid1@chromium.org, Jul 17

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

commit 829dc7dccae21bd3e669a300b85e064551078ee9
Author: Justin Cohen <justincohen@google.com>
Date: Tue Jul 17 18:36:38 2018

[ios] Image and styling tweaks to NTP.

 - Update most visited and search icon image.
 - Change hint text to go from 17pt to +.15 scale
 - Center hint text.
 - Make fake omnibox pill-like.
 - Tweak omnibox fade on RxR.

Bug:  857433 ,  854093 ,  860414 
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: Ie236f03daf20b074cb4b4382b3c70e79fc9eca9f
Reviewed-on: https://chromium-review.googlesource.com/1138347
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Reviewed-by: Stepan Khapugin <stkhapugin@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575731}
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@2x.png
[modify] https://crrev.com/829dc7dccae21bd3e669a300b85e064551078ee9/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@3x.png

Owner: pschaffner@chromium.org
Status: Assigned (was: Started)
#c7 fixed most of #c4, with two outstanding issues:

 - RxR omnibox isn't showing the new magnifying glass, so I can't add it to the NTP omnibox yet (don't know how to line it up)
 - the background color should ...  **not** be placed in the vibrancy content view.

pschaffner@ could you chime in the correct way to do either issue?  
Status: Fixed (was: Assigned)
Regarding the magnifying glass, no problem for this issue (this is just tip of the iceberg and that iceberg belongs to the omnibox, so I will open a new issue for you once that is all sorted out).

Regarding the background placement in the vibrancy content view, what landed and is in canary today looks fine because colors with an alpha component don't react the same way as opaque greys (what you had before) in vibrancy views, so the current result is pretty close to what I wanted anyway ;)

Sign in to add a comment