1010640 - (vertical-homescreen) Implement new thin dropshadows for app icons

Status: RESOLVED FIXED

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

Description

[Peter La]

Current/old app icon drop shadow should be replaced with the following new drop shadow definition:

120 degree angle (light source from top-left casting toward bottom-right).

On Flame FWVGA 480x854:

Offset distance is 1 pixel
Size is 2 pixels

Screens at higher or lower res should scale these numbers accordingly by the right scale factor.

Spec to be attached.

Comment 1

[Kevin Grandon :kgrandon]

Hey Peter - I think I need more details here. What do we do with semi-transparent icons (of which we have many? Do we want a normal shadow effect, something like this? https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/AddingShadows/AddingShadows.html

I'm assuming that we should try to use a canvas with shadowBlur, but that seems like quite a bit of work to do - and it may have performance implications.

Comment 2

[Kevin Grandon :kgrandon]

Attachment: Example of icon shadow

Comment 3

[Kevin Grandon :kgrandon]

Attachment: Github pull request

Hey Aus, Cristian - anyone have time for a review? Thanks!

Comment 4

[Peter La]

Attachment: Examples of dropshadow with css box-shadow numbers

Hi Kevin,

I'm attaching a more useful description for you.  Please have a look and let me know if you need more clarification.

The css box-shadow property numbers should get you close to what the examples look like, but you might have to tweak further to get it right.

Let me know if you need further help on this.

Cheers,
Peter

Comment 5

[Kevin Grandon :kgrandon]

Thanks Peter! That's really useful. We can't use box-shadow for this (as it's not a box), but we can use canvas and something similar. We'll get something in and can tweak it if needed.

Comment 6

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8423525 [details] [review]
Github pull request

Some comments on GH but LGTM! Good job

Comment 7

[Kevin Grandon :kgrandon]

Thanks for the review. Issues addressed and landed: https://github.com/mozilla-b2g/gaia/commit/1d52bad50ace2f57eb4c9719b43c14ebfabd9145

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/8e224dac5fe4

Comment 9

[Peter La]

Hey Kevin,

After looking at these again (esp. with the new fuzzy app icons), the drop shadows still feel a bit too thick compared to what I designed.  We may have to reopen this bug, but let's wait until the fuzzy icon bug is fixed.

ni'ing Kevin and Peter for visibility.

Comment 10

[Kevin Grandon :kgrandon]

Sure thing, we can definitely take another look, but tbh I don't know how much further we can adjust width in 2.0. I don't think canvas gives us the ability to do sub-pixel definitions for shadows, and currently we define a 1px blur. One option might be to reduce the opacity of the shadow from 20% to 10%? We could also loop in some graphics guys to see what would work best for the platform, and how we might be able to create a smaller shadow.

Comment 11

[Kevin Grandon :kgrandon]

Here is a reduced test case with our current implementation: http://jsfiddle.net/wyhru/

You may be able to fiddle with the constants there. If we can't get what we want by fiddling with these, then we may require some platform work.

Comment 12

[Peter La]

Hi Kevin,

Looking at that jsfiddle example, it seems to look better/tighter than what i see in the builds, so it may be partly due to the fuzzy icon issue.  Also, in the example, when you set the icon size to 126 (as it would be for Flame), the drop shadow is relatively quite thin and nice.

Comment 13

[Kevin Grandon :kgrandon]

Ok, let's see if we can resolve the fuzzy icon issue and if it makes it better.