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

Issue 684665 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Feb 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 3
Type: Bug



Sign in to add a comment

Don't show icon border for non-Autofill

Project Member Reported by rouslan@chromium.org, Jan 24 2017

Issue description

Android Pay and other 3rd party android payment apps can have weird icon dimensions, so we should not show icon border for them.
 
These are the screenshots, do looks better to me,
Screenshot_20170126-151912.png
221 KB View Download
Screenshot_20170126-151917.png
142 KB View Download
Screenshot_20170126-151921.png
121 KB View Download
Screenshot_20170126-151928.png
144 KB View Download
The droid icon seems huge. Did that change recently?
I don't think so, did you reviewed any change relate to it? 

Below is the logo looks like in canary,
Screenshot_20170126-153138.png
166 KB View Download
zkoch, I actually like the bordered version more. WDYT?
Probably, border version for expanded view and no border version for summary?

Comment 6 by zkoch@chromium.org, Jan 27 2017

Cc: bbergher@chromium.org
I don't think bordered version ever looks good myself. Adding Bruno for his take.
Yes, no border, please. Most app icons have transparent pixels around them (irregular shapes, circles, rounded corners) and a border only emphasizes the mismatch.

Two more aspects to consideR:
- App icons tend to look bigger than the CC icons, by being square-ish in shape. Can we make them 2 dp smaller in order to have roughly the same visual weight?
- Let's also right align all the icons. The 'gravity' in that column is to the right.
Do you want the same /height/ for icons, Bruno?
The icons have been aligned to the right in below screenshot. The Droid icon has rounded white space.
Screenshot_20170126-151917.png
142 KB View Download
Width and height, since the icons are square. It should be right aligned and vertically centered.

The attached image shows what I mean by right aligned: even with the icon's transparent pixels it's left boundary is on the blue line, when it should be on the magenta line.
Right Alignment.png
168 KB View Download
yes, that's what I mean, currently we aligned the icons to the right, but it looks not aligned since the droid icon has transparent border.

For the size of the icon, we did not set fix size for the icon (depends on icon itself), but set max width of the icon to be 56dp, if the width of the real icon greater than 56dp, it will be scaled to 56dp to preserve its aspect ratio.

Moreover, do all Android apps' icon have the same size and border? Otherwise, it looks doesn't make much sense to scale for this specific droid icon.
Maybe I'm misunderstanding or not expressing myself clearly. All Android app icon files are square, even if the content isn't, so their size is predictable. But even if they have transparent padding (as this droid icon does), since they're square, they won't take up the same room as the credit card icons, which are rectangular. So we should right-align them, as the attached image shows.

Does that make sense?
Right-Aligned-2.png
96.0 KB View Download
After discussed with bbergher@ offline and struggled a while with the tricky gridlayout, here are the screenshots of the updated UIs.

The app icon (24dp for width and height) looks a little bit small in expanded payment section for me, especially compare what it looks like in the selected item view,
Screenshot_20170131-111621.png
134 KB View Download
Screenshot_20170131-111627.png
136 KB View Download
Screenshot_20170131-111617.png
217 KB View Download
Final screenshots after communicating offline, changed alignment and icon size. The CL is upload for reviewing soon,
Screenshot_2017-01-31-14-50-34.png
165 KB View Download
Screenshot_2017-01-31-14-50-37.png
157 KB View Download
Screenshot_2017-01-31-14-50-42.png
140 KB View Download
Screenshot_2017-01-31-14-50-45.png
159 KB View Download
Looks great, Ganggui!
Status: Fixed (was: Available)
Components: -UI>Browser>Autofill>Payments UI>Browser>Payments

Sign in to add a comment