816135 - [Settings] - Need assets for the wifi icons

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Settings, defect, P2)

Description

[Victoria Gerchinhoren [:vicky]]

Need 4 sprites for this wifi icons as we differenciate between connected and not connected status:

1. Wifi open. Grey version all signal strenght (for not connected)
2. Wifi open. Blue version all signal strenght (for connected networks)
3. Wifi locked. Grey version all signal strenght (for not connected networks)
4. Wifi locked. Blue version all signal strenght (for connected networks)

Check this explanation of how the indicators behave:
https://www.dropbox.com/s/khon63wk2pud6oc/WiFi_Connection_UseCase.psd

The original secured wifi network lives here:
https://www.dropbox.com/sh/qxwvi1drr768gsf/XOZQiYccvO

Comment 1

[Eric Pang [:epang] UX]

Attachment: Wifi assets

Hi Victoria, I've attached the Wifi assets for all the wifi icon scenarios.

Comment 2

[Victoria Gerchinhoren [:vicky]]

Hi Eric, thanks! But wouldn't it be better to have 4 sprites?

Comment 3

[Eric Pang [:epang] UX]

Attachment: Wifi Sprites

Hi Vicky,  I've attached 4 new sprites for the wifi icons.  Thanks for letting me know about the formatting :).

Comment 4

[Patryk Adamczyk [:patryk] UX]

Pavel can you make sure Eric's wifi icons get integrated. Thanks!

Comment 5

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for UX branch

Sure, here they are :)

Comment 6

[Julien Wajsberg [:julienw]]

nominating because this is necessary imho.

Comment 7

[Jason Smith [:jsmith]]

Something like this we wouldn't take in shira. Shira should be only critical partner issues. leo would allow this.

Comment 8

[Sam Joch [:samjoch]]

Comment on attachment 705029 [details]
patch for UX branch

Comment on github (https://github.com/gordonbrander/gaia/pull/103) 
about the .active class ?

Comment 9

[Sam Joch [:samjoch]]

Landed in uxbranch: https://github.com/gordonbrander/gaia/commit/a52b4b1eaf510e884bfdc066706b6acd19de5fa1

Comment 10

[Lukas Blakk [:lsblakk] use ?needinfo]

Mass edit to set tracking-b2g18+ for these UX bugs that were called out for v1.1

Comment 11

[Eric Pang [:epang] UX]

Attachment: Wifi in Settings missing icons

Hi Pavel,
The implementation looks great within the first time start up screen.  But I just noticed that in the wifi settings the icons don't seem to be implemented correctly.  Only locks are showing without the wifi icons behind them.  Should the same icons be showing up? 

Eric

Comment 12

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

This icons are implemented only on Settings App. We need to create another bug for FTU App.
About the "Manage Network" screen we need extra functionality to show the status of "Known Networks" (we can create new bug for this too)

Comment 13

[Stephany Wilkes]

Comment on attachment 705029 [details]
patch for UX branch

Kaze, are you OK with all of this? Let me know. UX is just trying to get a handle on what may or may not be ready for 1.1. Thanks!

Comment 14

[Naoki Hirata :nhirata (please use needinfo instead of cc)]

This hasn't landed yet anywhere; for consistancy, we should fix it in FTU as well.  (see comment 12)

Comment 15

[Fernando Campo (:fcampo)]

I already commented it on the FTU followup (bug 859102), but copying it here just in case.

New wifi sprites landed in FTU a month ago, so this shouldn't be a blocker for this bug. Only concern is if we want to sync the code also, apart from the visuals. In that case, that would need further investigation and agreements, as in FTU we have separated sprites for every situation, and we also use animations during the connecting process.

But if code sync is not an issue, we can say that FTU already have the sprites updated, so definitely shouldn't be a blocker (and probably should be marked as dup)

Comment 16

[Victoria Gerchinhoren [:vicky]]

Hi, 
We, with Fernando Campo, worked on the wifi connection some months ago for FTU. The behaviour and icons sprite should be the same. The icons as I designed myself are 4:
 
the wifi icon alone, disconnected (grey)
the wifi icon alone, connected (blue)
the wifi icon with lock icon integrated in the shape, disconnected (grey)
the wifi icon with lock icon integrated in the shape, connected (blue)

And a set of animations to indicate the "connecting" state.

That same FTU wifi set should be implemented as it is the correct one and do not leave the animation out.

Thanks!

Comment 17

[Eric Pang [:epang] UX]

(In reply to Victoria Gerchinhoren from comment #16)
> Hi, 
> We, with Fernando Campo, worked on the wifi connection some months ago for
> FTU. The behaviour and icons sprite should be the same. The icons as I
> designed myself are 4:
>  
> the wifi icon alone, disconnected (grey)
> the wifi icon alone, connected (blue)
> the wifi icon with lock icon integrated in the shape, disconnected (grey)
> the wifi icon with lock icon integrated in the shape, connected (blue)
> 
> And a set of animations to indicate the "connecting" state.
> 
> That same FTU wifi set should be implemented as it is the correct one and do
> not leave the animation out.
> 
> Thanks!

Pavel, was the same set of wifi icons Victoria mentioned used for wifi in settings?  If they were then everything should be good to go.  But according to Naoki's comment (comment 14) this has not landed yet, can you take a look? thx!

Comment 18

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Yep the icons are the same.

Comment 19

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #18)
> Yep the icons are the same.

Pavel, can you check that this landed in master (Naoki commented that it has not landed anywhere yet)? Thanks!

Comment 20

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

maybe Sam can give us a better look on this ... Sam?

Comment 21

[Sam Joch [:samjoch]]

Pavel: Can you check the conflict with that commit https://github.com/mozilla-b2g/gaia/commit/0f3a6c729085e322502c05b5dc932bf27ea0139c ?

Comment 22

[Eric Pang [:epang] UX]

(In reply to Sam Joch [:samjoch] from comment #21)
> Pavel: Can you check the conflict with that commit
> https://github.com/mozilla-b2g/gaia/commit/
> 0f3a6c729085e322502c05b5dc932bf27ea0139c ?

Hi Pavel, have you had a chance to look into the conflict in the commit? Let me know, Thanks!

Comment 23

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

The icons in Settings app are the same as FTU app ... so I will mark this one as resolve

Comment 24

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

The icons in Settings app are the same as FTU app ... so I will mark this one as resolved

Comment 25

[Eric Pang [:epang] UX]

(In reply to Pavel Ivanov [:ivanovpavel] from comment #24)
> The icons in Settings app are the same as FTU app ... so I will mark this
> one as resolved

is this ready for verification?

Comment 26

[Fernando Campo (:fcampo)]

Sorry to jump in here and reopen the bug, but I've been revising master branch and I don't see any of the changes from the pull request landed in there. 
I still can see an unique sprite for wifi instead of four, and a different icon for the lock.

[master] Settings: 
- https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/images/wifi_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/style/images/wifi_lock.png

[master] FTU: 
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_connected_locked_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_connected_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_disconnected_locked_sprite.png
- https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/ftu/css/images/wifi_disconnected_sprite.png

Do we have a commit hash for the merged changes? Has the changes have been reverted at some point?

Comment 27

[Sam Joch [:samjoch]]

We don't need four sprite. This has been resolved in settings by using the wifi_lock.png over the wifi_sprite.png (see: https://github.com/mozilla-b2g/gaia/commit/0f3a6c729085e322502c05b5dc932bf27ea0139c#L4R157)

Actually i don't think this has been resolved in FTU. Pavel can you confirm ?

Comment 28

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

I confirm ... Eric, can you give us the latest version of the icons(and if possible to sync the version with Sergi or Steve?) so that we can put them if needed in FTU and Settings apps with one sprite?

Comment 29

[Fernando Campo (:fcampo)]

Pavel if you prefer I can take care of updating FTE, as we have animations on the code. If you agree please assign the bug to me

Comment 30

[Victoria Gerchinhoren [:vicky]]

Hi all. I¡ll try to explain the reason for the 4 sprites as it seems that to be a misunderstanding here. 

The sprites that Fernando is linking to are the icons proposal from the Visual Team TEF and MOZ for the wifi icons. The reason why we have 4 different sprites is that the lock icon is integrated to the wifi one so it looks and feels like as unified icon to sit well in the overall OS iconography, the single object and the default icon bounding box of 30 by 30px.

For more reference, this is the official iconography sheet for settings: https://www.dropbox.com/s/cextvg7xl8t5m0j/IconsSettings_20130513.psd

If you have further questions please "needinfo" me.

Thanks!

Comment 31

[Fernando Campo (:fcampo)]

After comment 30 and comment 27, my understanding is that we should be using 4 sprites, or use 2 but with a better display of the lock, as the current situation in settings shows it with a white border, which I don't think it's acceptable for UX.

- Going for 2 sprites will mean changes both in settings (new lock image) and FTU (remove 2 of the sprites and a new lock image)
- Going for 4 sprites implies changes on settings

I can do any of the changes, but I'd rather to have some confirmation from all parties involved before starting, to avoid future reopenings.

Comment 32

[Sam Joch [:samjoch]]

:fcampo, you can use the 4-sprites approach to settings. Let me know if you need help.

Comment 33

[Fernando Campo (:fcampo)]

Attachment: Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

I used :kaze cause AFAIK he was in charge of settings, and Pavel cause he was taking care of the wifi UX before.

Please proxy the reviews if you are not the correct person.

Comment 34

[Alex Keybl [:akeybl]]

We'll accept a low risk fix over the next few days, but this shouldn't be leo+ (doesn't block a partner).

Comment 35

[Fabien Cazenave [:kaze]]

Comment on attachment 753249 [details] [review]
Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

Niiiiice. :)

Comment 36

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Comment on attachment 753249 [details] [review]
Link to PR https://github.com/mozilla-b2g/gaia/pull/9960

very nice :) thank you :)

Comment 37

[Fabien Cazenave [:kaze]]

Merged on master: https://github.com/mozilla-b2g/gaia/commit/6d8ee303fbafa200c87546ac1470214dd2334697

Comment 38

[Fernando Campo (:fcampo)]

Attachment: Uplift to v1-train

NOTE: Please see https://wiki.mozilla.org/Release_Management/B2G_Landing to better understand the B2G approval process and landings.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 
User impact if declined: user will see an important lack of sync between wifi experience on FTU and settings
Testing completed: 
Risk to taking this patch (and alternatives if risky): only visual stuff, so quite safe
String or UUID changes made by this patch:

Comment 39

[Fabien Cazenave [:kaze]]

Warning: merge bug 877999 along with this patch.

Comment 40

[Fernando Campo (:fcampo)]

Uplifted to v1-train 85ad5b38c7a484ed6ea308fe454db7f8980043e3

(together with Bug 877999, 240c1d2f87b86f6f6dd21d8549081e26b542f0cc, thanks Kaze for the tip!)

Comment 41

[Darren]

Created a test case to make sure each icon is displaying.

https://moztrap.mozilla.org/manage/cases/?filter-id=9356
https://moztrap.mozilla.org/manage/cases/?filter-id=9357
https://moztrap.mozilla.org/manage/cases/?filter-id=9358
https://moztrap.mozilla.org/manage/cases/?filter-id=9359