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

Issue 819223 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Mar 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 2
Type: Task
Q1



Sign in to add a comment

Update NTP MV tile shapes

Project Member Reported by pschaffner@chromium.org, Mar 6 2018

Issue description

## Background
The squircle shape was originally meant for branding reasons and was planned for the Omnibox, the Omnibox alias button in the bottom toolbar and thus for the MV tiles. Since the Omnibox and alias button have changed, it no longer makes sense to use this shape on the NTP.

## Changes
The squircle shape needs to be changed to a rounded rect both for:
a) the larger bounding rect used to represent the MV tiles, and for
b) the bounding rect representing the favicon

Khalil: I would recommend a corner radius of 11 to match the other elements on the screen but I ultimately defer to you. I see from  issue 808044 , you provided an asset for (a), so I guess it would be easiest for eng to just update the asset (vs drawing programmatically).

I also see you were using the same squircle shape for the missing favicon graphic, so that should be updated as well (probably something proportional – like ~7pt radius — but again I defer to you).

In an effort to save time, I'm attaching the proposed 11pt radius shape as a template image (FWIW, I use pure black for template images to denote them as such and avoid ambiguity as to how they should be rendered). Khalil, please either sign off or attach the desired assets.
 
ntp_most_visited_tile.zip
4.1 KB Download
Sorry, I was under the assumption the one asset delivered via  issue 808044  was a template image used for all permutations of the MV tiles. I now see that the assets for the NTP reside here: https://drive.google.com/corp/drive/folders/1cJFBReKU8Qii5So-1Q-QrGj0pJBWCTev

Khalil, please update the necessary assets or point me to the relevant source file(s) and re-assign to me.
Tracking bug on eng side for overall most visited theme update is  crbug.com/805636 


Cc: pinkerton@chromium.org rohitrao@chromium.org
Any updates here?
We're also using this shape in recent tabs and in the tab grid (and possibly other places), so I'm guessing we will want to change it there as well?
The rounded rect favicon on top of the squircle makes my brain kinda dizzy as it tries (and fails) to resolve the two shapes. Let's please change it. 
Updated assets: https://drive.google.com/drive/folders/1cJFBReKU8Qii5So-1Q-QrGj0pJBWCTev?usp=sharing

ntp_most_visited_tile.png
ntp_most_visited_tile_@2x.png
ntp_most_visited_tile_@3x.png
khalilcader@ do the action item images also need to be updated? (eg history, reading list, etc)
Status: Fixed (was: Assigned)
Cc: pschaffner@chromium.org
What about the search view/3D touch widgets? Shouldn't the icons there change too?
Sounds like a separate user story that needs a separate tracking bug. I am assuming background colour might have to change.
I guess we could leave the icons on the widgets as-is for now (for Phase 1 I mean). 
Project Member

Comment 13 by bugdroid1@chromium.org, Mar 27 2018

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

commit 9adb38cd6cc59e9612dbd864dd49cdaf785e695f
Author: Justin Cohen <justincohen@google.com>
Date: Tue Mar 27 13:51:44 2018

[ios] More tweaks to content suggestions icons, font and blur.

Bug:  819223 
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: I41edb5310f0529f9d770f5b415cd6f5179a89d1a
Reviewed-on: https://chromium-review.googlesource.com/980672
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#546098}
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/content_suggestions_learn_more_item.mm
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_most_visited_tile.imageset/ntp_most_visited_tile.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_most_visited_tile.imageset/ntp_most_visited_tile@2x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_most_visited_tile.imageset/ntp_most_visited_tile@3x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png
[modify] https://crrev.com/9adb38cd6cc59e9612dbd864dd49cdaf785e695f/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm

Sign in to add a comment