1061674 - [Browser] Blurry and Misaligned SSL Lock

Status: RESOLVED FIXED

Description

[Eric Pang [:epang] UX]

Created attachment 8482716 [details]
Blurry and missaligned SSL Lock

Hey Kevin,

Feel free to redirect this bug, I wasn't sure who to assign it to.

The ssl icon looks blurry in the chrome, while other icons look sharp.  Can you take a look and let me know if it's a visual asset problem? 

Also, the icon should take up 30 px of horizontal space, so the space is equal on both sides of the icon.

Here's the spec for reference:
https://mozilla.box.com/s/oedme1y7u6m3s6lxvk0a

Thanks!

Comment 1

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #0)
> Created attachment 8482716 [details]
> Blurry and missaligned SSL Lock
> 
> Hey Kevin,
> 
> Feel free to redirect this bug, I wasn't sure who to assign it to.
> 
> The ssl icon looks blurry in the chrome, while other icons look sharp.  Can
> you take a look and let me know if it's a visual asset problem? 
> 
> Also, the icon should take up 30 px of horizontal space, so the space is
> equal on both sides of the icon.
> 
> Here's the spec for reference:
> https://mozilla.box.com/s/oedme1y7u6m3s6lxvk0a
> 
> Thanks!

Sorry, looks like the visual assets are too small, fixing them now :).

Comment 2

[Eric Pang [:epang] UX]

(In reply to Eric Pang [:epang] from comment #1)
> (In reply to Eric Pang [:epang] from comment #0)
> > Created attachment 8482716 [details]
> > Blurry and missaligned SSL Lock
> > 
> > Hey Kevin,
> > 
> > Feel free to redirect this bug, I wasn't sure who to assign it to.
> > 
> > The ssl icon looks blurry in the chrome, while other icons look sharp.  Can
> > you take a look and let me know if it's a visual asset problem? 
> > 
> > Also, the icon should take up 30 px of horizontal space, so the space is
> > equal on both sides of the icon.
> > 
> > Here's the spec for reference:
> > https://mozilla.box.com/s/oedme1y7u6m3s6lxvk0a
> > 
> > Thanks!
> 
> Sorry, looks like the visual assets are too small, fixing them now :).

the ssl lock and broken ssl can both be found with the browser chrome icons
https://mozilla.box.com/s/xleyd4fnpl5e2gvo2bxr

They are resized to the spec now, hopefully this fixes the blurriness and margins, thanks!

Comment 3

[Kevin Grandon :kgrandon]

Created attachment 8482832 [details] [review]
Pull request - Update SSL Icon assets

Comment 4

[Kevin Grandon :kgrandon]

Created attachment 8482833 [details]
Screenshot - Implementation on flame

Hey Eric - Could you take a look at this screenshot on a flame? I've centered the icon within a 3rem box, just wanted to make sure this is what you were looking for. Thanks!

Comment 5

[Eric Pang [:epang] UX]

(In reply to Kevin Grandon :kgrandon from comment #4)
> Created attachment 8482833 [details]
> Screenshot - Implementation on flame
> 
> Hey Eric - Could you take a look at this screenshot on a flame? I've
> centered the icon within a 3rem box, just wanted to make sure this is what
> you were looking for. Thanks!

Hey Kevin, looks like i made the icons too small.  I've updated them on box again.  

https://mozilla.box.com/s/xleyd4fnpl5e2gvo2bxr

Sorry for all the back and forth.  I think it should be good after this, I'll look to ui-review tomorrow morning. Thanks again for working on this!

Comment 6

[Kevin Grandon :kgrandon]

Created attachment 8483719 [details]
Assets - SSL Icons in a zip

Uploading a zip of the icons here in case they are needed for the future.

Comment 7

[Kevin Grandon :kgrandon]

Comment on attachment 8482832 [details] [review]
Pull request - Update SSL Icon assets

Hey Eric - assets have been updated now.

Since this is mainly just an asset swap, would you mind flipping the review? flag here instead of ui-review if it looks good to you? I'll try to provide a screenshot as well here shortly.

Comment 8

[Kevin Grandon :kgrandon]

Created attachment 8483773 [details]
Screenshot of implementation

Comment 9

[Eric Pang [:epang] UX]

(In reply to Kevin Grandon :kgrandon from comment #8)
> Created attachment 8483773 [details]
> Screenshot of implementation

The icon looks good now, just one more nit pick.. is it possible to horizontally center the icon between the edge of the input field and where the text starts?  If possible IRC me when it's done so I can quickly R+ :)  Thanks again Kevin!

Comment 10

[Kevin Grandon :kgrandon]

Created attachment 8484245 [details]
Updated implementation screenshot

Comment 11

[Eric Pang [:epang] UX]

Comment on attachment 8482832 [details] [review]
Pull request - Update SSL Icon assets

Just needs to move 1px right, but you already know what :). R+
Thanks again!

Comment 12

[Kevin Grandon :kgrandon]

In master: https://github.com/mozilla-b2g/gaia/commit/1d910d919e778622ef0569f3f6896fae1a609d56

Comment 13

[Kevin Grandon :kgrandon]

Comment on attachment 8482832 [details] [review]
Pull request - Update SSL Icon assets

This is very low-risk visual polish we would like to uplift.

Comment 14

[Ryan VanderMeulen [:RyanVM]]

v2.1: https://github.com/mozilla-b2g/gaia/commit/13e2932cba9eada50985a826792405a0a8162489