1043496 - Default Image for Contacts When Image is Missing

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Contacts, defect)

Description

[Sabrina Smelko]

Default Imagery will be used wherever images are missing or not assigned. In this case, when a contact doesn't have a contact image, the default image will appear (in contact list, incoming call and outgoing call etc.)

Using CSS, we can crop the attached black and white illustration and apply a CSS overlay (colour-burn at 100%) with hex colour code #26D1C4.

This way, the image fits in to the comms style without standing out too much. And by randomizing the crop, image will always appear fresh and not repetitive.

Box link for the work/concepts: https://mozilla.app.box.com/files/0/f/2097944726/Source

Box link for the b/w image: https://mozilla.app.box.com/files/0/f/2097944726/1/f_19314621437

Comment 1

[Sabrina Smelko]

Attachment: black and white base image.

Comment 2

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

I think that we should use colored image because we can't `color-burn` the image like in PS, because of this:

Photoshop:
================================================================
Document who have 2 layers:
    Over  : The Color (#26D1C4) - Blending Mode (Color Burn)
    Under : The Imagery         - Blending Mode (Normal)


HTML & CSS:
================================================================
Element with Blending Mode (Color Burn) who have:
    Over  : The Imagery         
    Under : The Color (#26D1C4)


for Contacts App we need Imagery only for thumbnail, right?
If yes I will use for example 70x124 pixels image and I will try to show random part of if (right top,  center bottom, cender center etc.)

Are you OK with this?

Comment 3

[Anthony Ricaud (:rik)]

The box links are not publicly accessible. Could you make them accessible Sabrina?

Comment 4

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

Attachment: patch for Gaia/master

Comment 5

[Sabrina Smelko]

Attachment: Default_Imagery_Contacts.jpg

Actually Pavel, the default image will be seen on the incoming call screen and the contact list screen and anywhere in the phone where the contact image would appear. See attachments for reference. 

The contact list icons are small, but the incoming call, for example, is the full-width size of the device.

Comment 6

[Sabrina Smelko]

Attachment: Contacts Default Image

Pavel, do you mean that the overlay is too complicated? If so, I can provide a coloured image just for use in contacts. See attachment.

My only concern is that other apps also need a default image and I don't want them all to be turquoise. Can I provide a separate image for each acpp the default image is used in?

Comment 7

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

He Sabrina,
This patch is only for contacts app ... Incomming screen and other screens in the spec are different apps :)
Are you Ok with contacts app if Yes we can go forward with the prototype if No we will gix all issues that we have :)

Thanks :)

Comment 8

[Sabrina Smelko]

Oh okay, perfect. Thanks for clarifying. For prototype purposes, yes, we can go ahead. Thanks!

Comment 9

[Francisco Jordano [:arcturus] [:francisco]]

Hi,

We will need to see the impact of this on low memory devices. I'm afraid that doing this in a fugu/like device will consume a lot of resources.

We will need to be sure that we reuse the same blob for the letters that are the same, also, have we done an study of this will look on a contact list which most of the contacts don't have photo?

Comment 10

[Jose Manuel Cantera]

I agree with Francisco. 

apart from that, a default image was proposed long time ago and it was decided not to be used. I don't know why we are reopening this old issue.

Comment 11

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

I'm not sure ... maybe Sabrina can give use more light?

Comment 12

[Anthony Ricaud (:rik)]

Francisco: Why would it consume resources and why are you talking about blobs? Can't we write the letters in the DOM?

Comment 13

[Francisco Jordano [:arcturus] [:francisco]]

(In reply to Anthony Ricaud (:rik) from comment #12)
> Francisco: Why would it consume resources and why are you talking about
> blobs? Can't we write the letters in the DOM?

:) ... definitely, I apologize since my mind was just thinking on a image problem that we had.

We can do this as Anthony said writing new elements on the dom, which I don't like for the list performance.

With this patch applied I see (not my eye ;) but the fps indicator) a drop between 5-10 fps while scrolling the list fast.

Pavel will you add the letter to your patch?

Thanks a lot!

Comment 14

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

Hey Francisco and Anthony,

Sorry about this but ... I'm not sure that I understand ... which letters?

Comment 15

[Francisco Jordano [:arcturus] [:francisco]]

Hei Pavel!

In this attachment:

https://bugzilla.mozilla.org/attachment.cgi?id=8462602

I guess we are putting the group letter for the contact isnt?

Comment 16

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

Oh ... sorry I focused over the image ... and totally miss the letter ... :D like I see them for the first time.

I will add them soon :) Thanks :)

Comment 17

[Anthony Ricaud (:rik)]

(In reply to Francisco Jordano [:arcturus] [:francisco] from comment #13)
> We can do this as Anthony said writing new elements on the dom, which I
> don't like for the list performance.
Why don't you like it for list performance?

> With this patch applied I see (not my eye ;) but the fps indicator) a drop
> between 5-10 fps while scrolling the list fast.
Could it be because we images on every item? Or because of border-radius? Maybe a look at https://wiki.mozilla.org/FirefoxOS/Performance/App_Performance_Validation would give some clues.

Comment 18

[Francisco Jordano [:arcturus] [:francisco]]

(In reply to Anthony Ricaud (:rik) from comment #17)
> > With this patch applied I see (not my eye ;) but the fps indicator) a drop
> > between 5-10 fps while scrolling the list fast.
> Could it be because we images on every item? Or because of border-radius?
> Maybe a look at
> https://wiki.mozilla.org/FirefoxOS/Performance/App_Performance_Validation
> would give some clues.

The border radius, I would like to have a patch to measure it and check. But to be honest, I really like how it looks like :)

Comment 19

[Francisco Jordano [:arcturus] [:francisco]]

Pavel, do you think we can have this for 2.1 (1st September)? I'll give you a hand with anything related to the list, performance, reviews and coding if needed ;)

Comment 20

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

Hey Francisco,

I wish that too :) thanks :)
Today I will continue with this one and I will add the letters and r? you to help me with the performance and if you have time we can try to hack other apps (I need help with the JS part)?

Comment 21

[Francisco Jordano [:arcturus] [:francisco]]

Happy to help here Pavel!

Comment 22

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

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

here we go :)

Comment 23

[Sabrina Smelko]

Hey Pavel and Francisco! Thanks for your enthusiasm and help on this project. At the risk of sounding silly, it the document in GitHib something I can fork and upload to my Flame to see the default imagery "in action"? Or is it simply a matter of flashing my device and it will be included in the flash? 

If you could you walk me through how to get this patch on my device, it would be greatly appreciated!
Thanks again.

Comment 24

[Francisco Jordano [:arcturus] [:francisco]]

Hi Sabrina,

You can apply the patch that Pivanov provided, or flash the branch bug-1043496 in Pivanov's repo.

For the first option try to do the following:

- Clone gaia's repo:
git clone https://github.com/mozilla-b2ggaia.git
cd gaia

- Download Pivanov patch and apply it
wget https://github.com/mozilla-b2g/gaia/pull/22160.patch
patch -p1 < 22160.patch

- Flash gaia into your phone (this will delete all data)
make reset-gaia

If you have trouble, are you in an office where an engineer can give you a hand?

Comment 25

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

setting feature-b2g=2.1 as this is the feature committed with partner.
Pavel, it will be great if you can tag the target milestone to either speint2 or sprint3.
Thanks.

Comment 26

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

Hey Sabrina,
are you OK with this one?

Comment 27

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

Pretty good job, we are getting close, please see my comments on github.

Basicaly we should split the function for adding image in the one that already is there and a new one (the code you created) for adding default image in case that the contact doesn't have one.

Thanks for the job Pavel!

Comment 28

[Francisco Jordano [:arcturus] [:francisco]]

Hei Pavel,

this is one of the features for 2.1 targeted by the end of this sprint, do you think you'll have time to finish it?

Comment 29

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

Hey Francisco,

yeah I think we are very close (did you see my email about the latest version of the PR in github?)

Comment 30

[Francisco Jordano [:arcturus] [:francisco]]

Hei Pavel!

Unfortunately didn't get any email, could you put here in bugzilla or resend?

Thanks!

Comment 31

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

Hey Francisco,

I have success with your proposal (I hope so) but there is one small thing:

when we have a contact with photo we have the group letter over it ... maybe because of the cloneNode but I'm not sure.

I need help
Thanks in advance :)

Comment 32

[Francisco Jordano [:arcturus] [:francisco]]

Hey Pavel,

could you rebase your patch, wanted to download it to check it but it's not mergeable in master.

Thanks!

Comment 33

[Francisco Jordano [:arcturus] [:francisco]]

Pavel, I found another problem,when you scroll up and down, you can see how more images are being added.

Will try to provide a patch over your branch.

Comment 34

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

Done ;)

Comment 35

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: pavel_patch.diff

Pavel, I don't know why I cannot send you a PR to your branch so I'm attaching a patch to your last PR, you can add it to your code by:

git apply pavel_patch.diff

It solved the problem of the repeated letters, also I think I manage to improve the performance of the original patch

Could you add this patch to your PR?

Comment 36

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

Hey Francisco :)

looks nice on my device :)) (patch is updated)

Comment 37

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

Hei folks, could you review this?

I'll review as well, but would like to know Cristian's opinion about performance and the use of images on the list.

Sergi your opinion is also important.

I just helped Pavel to make it work quickly, but I'm sure that we still can improve even more when we show the default image or when we  dont.

For FB images, as FB data is loaded asynchronously, we will see first default image and then we will change to the FB image.

Comment 38

[Cristian Rodriguez (:crdlc)]

(In reply to Francisco Jordano [:arcturus] [:francisco] from comment #37)
> Comment on attachment 8462498 [details] [review]
> patch for Gaia/master
> 
> Hei folks, could you review this?
> 
> I'll review as well, but would like to know Cristian's opinion about
> performance and the use of images on the list.

I want to move this question to Vivien because it is more for an APZ's expert. Although I guess that we could modify a bit the image loader component for changing the display property ("none" - "block") when the rows are on the viewport or not like we do with images loading or releasing them right now. Of course we should do it in a follow-up.

> 
> Sergi your opinion is also important.
> 
> I just helped Pavel to make it work quickly, but I'm sure that we still can
> improve even more when we show the default image or when we  dont.
> 
> For FB images, as FB data is loaded asynchronously, we will see first
> default image and then we will change to the FB image.

I noticed this too, is it expected?

Comment 39

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

I wrote some comments on github

Comment 40

[Cristian Rodriguez (:crdlc)]

You have to take a look at contacts under "#" group when we have only the number. The photo shows "und" as title.

Comment 41

[Cristian Rodriguez (:crdlc)]

And also for favorites contacts under star group. The photo shows "favo" as title

Comment 42

[Cristian Rodriguez (:crdlc)]

And the last thing, please take a look to the search list, all photos by default show "unde" as title

Comment 43

[Cristian Rodriguez (:crdlc)]

Pavel, feel free to take this patch [1] that implements:

1. Show images by default when they are on screen
2. Hide images by default when they aren't on screen
3. The image by default is hidden for FB contacts while they are loading and also the same happens when contacts have a local image (this is less perceptible but happens).

[1] https://github.com/crdlc/gaia/commit/78c298c3a97c2e2ad9c1ae9cb83cce36290f7ddd

Fran, could you check this patch in order to know if you're comfortable with this behavior?

Many thanks

Comment 44

[Johan Lorenzo [:jlorenzo]]

https://moztrap.mozilla.org/manage/cases/?filter-tag=2992

Comment 45

[Francisco Jordano [:arcturus] [:francisco]]

(In reply to Cristian Rodriguez (:crdlc) from comment #43)
> Pavel, feel free to take this patch [1] that implements:
> 
> 1. Show images by default when they are on screen
> 2. Hide images by default when they aren't on screen
> 3. The image by default is hidden for FB contacts while they are loading and
> also the same happens when contacts have a local image (this is less
> perceptible but happens).
> 
> [1]
> https://github.com/crdlc/gaia/commit/78c298c3a97c2e2ad9c1ae9cb83cce36290f7ddd
> 
> Fran, could you check this patch in order to know if you're comfortable with
> this behavior?
> 
> Many thanks

Hei Cristian, thanks for the patch, it definitely helps with the preload of the default image. An impressive improve.

Pavel could you add Cristian's patch to your PR?

I'll give you a hand with the favourites and the 'und' groups

Comment 46

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

Hey Francisco,

I update my patch based on Cristian patch and I also fix some comments on github. I will ping you back when I'm on IRC to see what's next :) Thanks guys :)

Comment 47

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: patch_groups.diff

Hei Pavel,

please find attached another patch that will solve the problems of the groups that Cristian commented, for the contacts under the group '#' now we will displaying '#' in the image, for the favorites one we will displaying the original group.

With this I think the only thing we are missing is unit tests.

Do you agree with the result?

Comment 48

[Francisco Jordano [:arcturus] [:francisco]]

One more thing, Cristian left a couple of tiny comments on the original PR that are pretty easy to add, we should introduced them as well here :)

Comment 49

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: config_activation.diff

Hei Pavel,

here is the patch for making this feature available via build time option.

By default we setup to true, so we enable the default images. But we give the chance to other builds to decide if the want to enable it or not.

Comment 50

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

I just test it :) and I think it looks nice :) PR updated
Who can I ask for r?

Comment 51

[Francisco Jordano [:arcturus] [:francisco]]

Let me send a last patch with unit tests and I think we can ask Cristian for r?

Comment 52

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: unit_test.diff

Hei Pavel, last JS part, unit tests to check when we render the default photo and that the favorite and # groups have the correct data.

With this, I think we can ask Cristian for review.

Comment 53

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

Hey Francisco,

thanks :) I fix some lint errors and everything looks OK :)

Comment 54

[Sabrina Smelko]

Would anyone be kind enough to send me a screen shot? I've been having trouble flashing my phone to see the latest build with this implemented. Or is it not in the latest build? I'd like to see how it's looking. Thanks!

Comment 55

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: 2014-08-26-21-02-58.png

Hi Sabrina, this is a screenshot, showing contact with default image, also in the favorites group and the #

Comment 56

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: enable_by_default.diff

Hi Pavel,

In my last patch I disabled by default this feature, i'm sending the patch to enable it by default.

Sorry for the inconvenience

Comment 57

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

Sure :) Updated!

Comment 58

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

Hi, the code looks good although before the positive review I would like you to answer some questions and fix some nits in github. Thanks a lot for your work

Comment 59

[Cristian Rodriguez (:crdlc)]

Obviously, after answering/addressing comments, please request again to me the last review. Thanks Pavel

Comment 60

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: patch_favorites.diff

Pavel could you update the patch?

Comment 61

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

it's updated now

Comment 62

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

The search view shows contacts with photo by default like "unde" and the feature to make contacts as favorites is broken for contacts with photo by default. At least I can reproduce it.

Comment 63

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

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

I think it's OK now :)

Comment 64

[Francisco Jordano [:arcturus] [:francisco]]

The search should be fixed, I cannot reproduce the error on making a contact with photo a favorite.

Comment 65

[Cristian Rodriguez (:crdlc)]

with photo by default?

(In reply to Francisco Jordano [:arcturus] [:francisco] from comment #64)
> The search should be fixed, I cannot reproduce the error on making a contact
> with photo a favorite.

Comment 66

[Cristian Rodriguez (:crdlc)]

I still see the problem with favorites

STR:

1) Add as favorite a contact already in my list
2) It works fine
3) Create a new contact (name: 'manolo')
4) Add as favorite 'manolo'
5) It fails, 'manolo' hides the contact by default and it does not appear under 'Favorite' group

Comment 67

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

Please ask me again when it is fixed (see comment 66). Thanks a lot

Comment 68

[Francisco Jordano [:arcturus] [:francisco]]

Attachment: fix_tests.diff

Last patch to fix the unit tests and get ride of the |setDefaultImage|

Hopefuly is the last one ;D

Comment 69

[Cristian Rodriguez (:crdlc)]

When it is merged I gonna review and test, thanks a lot mates

Comment 70

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

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

Updated :)

Comment 71

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8462498 [details] [review]
patch for Gaia/master

It works like a charm, good job, thanks for this patch. Before merging please take a look at this comment https://github.com/mozilla-b2g/gaia/pull/22160/files#r16759797

Thanks guys

Comment 72

[Francisco Jordano [:arcturus] [:francisco]]

@ssmelko could we have that UX review?

Comment 73

[Sabrina Smelko]

I can't actually get the patch to load on my device. Pavel tried to help me, but he's not sure the issue either. Please ask Patryk's opinion for the final say. In the meantime, I'll try to trouble-shoot.

Comment 74

[Patryk Adamczyk [:patryk] UX]

Pavel it functions wells. However there are 3 things I would polish, perhaps best make a separate bug for them if needed.

1. https://bug1043496.bugzilla.mozilla.org/attachment.cgi?id=8461679 not sure why the BW background image is fuzzy or really soft. Why can’t we use a crisp image?

2. https://bug1043496.bugzilla.mozilla.org/attachment.cgi?id=8479305, it would be good to neutralize the tones more. Some of letters appear too bright (3rd G and #) and some appear too dark (1st G, 2nd G, 5th G). Basically only the 4th G looks to have good brightness / contrast. This should be addressed in the large BW image.

3. Do we need the grey outline stroke around the pictures? I’d remove it. This could be addressed in v.2.2 if its too late for v.2.1

Comment 75

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

Hey Patryk,

for #1 and #2 maybe Carol will help us. #3 is already done :)

Thanks :)

Comment 76

[Francisco Jordano [:arcturus] [:francisco]]

Hi folks,

can we land this, as it's a 2.1 feature and do some follow ups in 2.1 or leave it for 2.2?

Cheers!

Comment 77

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

Hey Francisco,
I'm waiting for final images for this one (with better quality) and I will land it after that (hope till few hours) are you OK?

Comment 78

[Francisco Jordano [:arcturus] [:francisco]]

That sounds like a good plan to me \o/!

Comment 79

[Carol Huang [:Carol]]

Hi Pavel,
As our offline discussion, i believe Sabrina will take care of this. thanks!

Comment 80

[David Scravaglieri [:scravag]]

(In reply to Francisco Jordano [:arcturus] [:francisco] from comment #76)
> Hi folks,
> 
> can we land this, as it's a 2.1 feature and do some follow ups in 2.1 or
> leave it for 2.2?
> 
> Cheers!

UX is review is way too late and slow. Go with what we have and create a follow-up.

Comment 81

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

Thanks all :)

Landed to master:
https://github.com/mozilla-b2g/gaia/commit/001d1761e4685c2a08d3e96bb362f031d47f4033

Comment 82

[Zibi Braniecki [:zbraniecki][:gandalf]]

Reverted because of Gu errors: https://tbpl.mozilla.org/php/getParsedLog.php?id=47016023&tree=Gaia-Try&full=1

Commit: https://github.com/mozilla-b2g/gaia/commit/99f72f1b681a497c0c6abf0bf7f24c55b2cc3d1c

Comment 83

[Francisco Jordano [:arcturus] [:francisco]]

Relanded:

https://github.com/mozilla-b2g/gaia/commit/561f053a8eb8da05d6c8432f35e01db36b55d1fd