1039631 - Remove subtle radial gradients

Status: RESOLVED FIXED

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

Description

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

We have a number of radial gradients that are basically "dark gray background with a slightly lighter radial gradient".  Each one of these uses MBs of memory when rendered and BenWa tells me that they're quite slow to draw on ARM too.  We should ditch them.

Comment 1

[Benoit Girard (:BenWa)]

(In reply to Kyle Huey [:khuey] ([e-mail]) from comment #0)
> BenWa tells me that they're quite slow to
> draw on ARM too.  We should ditch them.

I see 2.5 MB of memory usage split between 3 gradient.png.

The current images have the radial gradient pre-generated. This consumes a lot of memory. If we were to generate them on-draw (to what I was alluding to in Kyle's comment) this would be very expensive because sqrt are expensive to compute there but we would save the memory usage. Both of these are a terrible option. Note that a linear gradient would probably be cheap enough to generate on draw.

We should consider replacing the effect with something else that is more efficient or removing the effect.

We could also experiment having a very small gradient image and stretching that. That could save us a lot of memory and preserving It -might- look fine since it's a dark and fuzzy gradient to begin with, but it might also look terrible.

Comment 2

[Jon Hylands [:jhylands]]

Benoit, we need to know two things here - where are the radial gradient PNG files located in the file system, and where do they show up in the GUI? We need this in order to try anything suggested in comment 1...

Comment 3

[Benoit Girard (:BenWa)]

The best way to get it is to run tools/get_about_memory.py and look at what is currently loaded under the image section and grepping to find how it comes about.

Comment 4

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

http://mxr.mozilla.org/gaia/find?text=&string=gradient
http://mxr.mozilla.org/gaia/search?string=gradient%23.png&regexp=on&find=&findi=&filter=^[^\0]*%24&hitlimit=&tree=gaia

Comment 5

[Aus Lacroix [:aus]]

I can look into this and generate some numbers. Probably the biggest gains we can get will be to remove them from the shared elements. We can let apps decide if they want to eat more memory for gradients. :)

Comment 6

[Aus Lacroix [:aus]]

The only consistent gradient used is in the system app: 0.59 MB (01.46%) -- image(app://system.gaiamobile.org/shared/style/confirm/images/ui/gradient.png)

It's always on screen. Other gradients are temporary when used by shared elements. Not sure that it's worth doing this at this time.

Comment 7

[Aus Lacroix [:aus]]

System App Memory Usage (Main Process) w/gradients: 40.88 MB, w/o gradients: 39.74 MB.

Actually kind of a sizable chunk. This was done by simply removing the gradient from the shared 'confirm' dialog css.

Comment 8

[Aus Lacroix [:aus]]

swilkes, if we were to genuinely remove these gradients, what would we want to replace them with? Flat colors? http://mxr.mozilla.org/gaia/find?text=&string=gradient << file list.

Comment 9

[Benoit Girard (:BenWa)]

The gradient can be kept but instead specified inline. It might need to be decoded on demand which would hurt the time to display the menu but it would stop hurting other things by forcing needless memory pressure/background processes to be killed.

Otherwise a linear CSS gradient should be fast enough to draw in CSS. But yes a flat color should draw much faster.

Comment 10

[Nicholas Nethercote [inactive]]

Does the gradient really add much visually? Sounds like the effect is very subtle. Can we try just a flat color and see if that's acceptable?

Comment 11

[Stephany Wilkes]

No one from visual design is on this bug. Adding them now. This is their call, at least in part.

Comment 12

[Patryk Adamczyk [:patryk] UX]

Hey Kyle, do you have examples / screenshots. If its for app backgrounds we're going to remove these soon as part of the building block updates.

Comment 13

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

I don't know where they are, but based on the paths I suspect they're in the value selector, date selector, etc.

Comment 14

[[:fabrice] Fabrice Desré]

(In reply to Kyle Huey [:khuey] ([e-mail]) from comment #13)
> I don't know where they are, but based on the paths I suspect they're in the
> value selector, date selector, etc.

We removed some on tarako in bug 1001455 if that can help finding them.

Comment 15

[Kyle Huey (Exited; not receiving bugmail, old account, do not use)]

Immediately after startup on trunk (without even unlocking the phone) I see

app://system.gaiamobile.org/shared/style/confirm/images/ui/gradient.png
app://callscreen.gaiamobile.org/shared/style/action_menu/images/ui/gradient.png

loaded.  Each is using 0.59 MB of memory.

I find it surprising that we've triggered loading these images at all.

Comment 16

[Michael Henretty [:mikehenrty][:mhenretty]]

Aus, can you apply the patch from bug 1001455 and get screenshots for Patryk?

https://bugzilla.mozilla.org/attachment.cgi?id=8412720&action=diff

Comment 17

[Aus Lacroix [:aus]]

Yep. I can do that today. Leaving NI? flag on until I've fulfilled the request. :)

Comment 18

[Aus Lacroix [:aus]]

Attachment: Pull Request - Remove gradients from lockscreen, shared elements.

Comment 19

[Aus Lacroix [:aus]]

Attachment: Screenshots - What it looks like without said gradients.

Comment 20

[Patryk Adamczyk [:patryk] UX]

Attachment: missing.png

Looks like the button divider is missing. See what I mean in the screenshot highlighted but the magenta ellipse.

Comment 21

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8463644 [details]
Screenshots - What it looks like without said gradients.

The divider is missing. 
Przemek can you also look at this attachment. Can we apply the new design?

Comment 22

[Aus Lacroix [:aus]]

The divider looks really jarring against the flat color so I assumed we would want it to be removed. I can put it back and send you another screenshot but... believe me, it's nasty looking. :)

Patryk, I'm not sure which attachment you are talking about... is it the one showing the missing divider or a different 'new' design screenshot that's not attached yet?

Comment 23

[Przemek Abratowski [:przemek] UX]

Patryk, I'm also confused by your question? If you're talking about the 2.2 design for these dialogs then I think that would be too much of a change to make here.

Comment 24

[Przemek Abratowski [:przemek] UX]

I think I also prefer adding back the divider tone that Patryk said is missing, maybe we can make it far more subtle?

Comment 25

[Aus Lacroix [:aus]]

The divider is currently an image instead of a flat color. I think having a flat color to go with the rest of the panel would be more pleasing. Also to note that the divider is only present in confirm dialogs. I'll provide screenshots of one with the pattern that was there before and one with an awesome color I'll pick.

Comment 26

[Aus Lacroix [:aus]]

Attachment: UI/UX Review - With Previous Separator Pattern

Comment 27

[Aus Lacroix [:aus]]

Attachment: UI/UX Review - With Accent Color (from our colour palette)

Comment 28

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8464244 [details]
UI/UX Review - With Accent Color (from our colour palette)

Looks good!

Comment 29

[Patryk Adamczyk [:patryk] UX]

Comment on attachment 8464243 [details]
UI/UX Review - With Previous Separator Pattern

The solid colour one looks MUCH better.

Comment 30

[Aus Lacroix [:aus]]

Awesome! Thanks Patryk. I'm going to commit this to master and 2.0 shortly. :)

Comment 31

[Aus Lacroix [:aus]]

Commit (master): https://github.com/mozilla-b2g/gaia/commit/80d9343cdce468eee9642829e68acc9ee0e47487

Commit (v2.0): https://github.com/mozilla-b2g/gaia/commit/0bc0fb854b503ac38d9184c8325062987b464cbe

Fixed!