Closed Bug 1010640 Opened 6 years ago Closed 6 years ago

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


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



(feature-b2g:2.0, b2g-v2.0 fixed)

2.0 S2 (23may)
feature-b2g 2.0
Tracking Status
b2g-v2.0 --- fixed


(Reporter: pla, Assigned: kgrandon)



(Whiteboard: ux-tracking, visual design, visual-tracking, [ft:systemsfe],[p=3])


(2 files, 1 obsolete file)

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.
feature-b2g: --- → 2.0
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?

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.
Flags: needinfo?(pla)
Assignee: nobody → kgrandon
Whiteboard: ux-tracking, visual design, visual-tracking, [ft:systemsfe] → ux-tracking, visual design, visual-tracking, [ft:systemsfe],[p=3]
Target Milestone: --- → 2.0 S2 (23may)
Attached image Example of icon shadow (obsolete) —
Attached file Github pull request
Hey Aus, Cristian - anyone have time for a review? Thanks!
Attachment #8423525 - Flags: review?(crdlc)
Attachment #8423525 - Flags: review?(aus)
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.

Attachment #8423404 - Attachment is obsolete: true
Flags: needinfo?(pla)
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 on attachment 8423525 [details] [review]
Github pull request

Some comments on GH but LGTM! Good job
Attachment #8423525 - Flags: review?(crdlc) → review+
Attachment #8423525 - Flags: review?(aus)
Thanks for the review. Issues addressed and landed:
Closed: 6 years ago
Resolution: --- → FIXED
Priority: -- → P2
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.
Flags: needinfo?(pdolanjski)
Flags: needinfo?(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.
Flags: needinfo?(pdolanjski)
Flags: needinfo?(kgrandon)
Here is a reduced test case with our current implementation:

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.
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.
Ok, let's see if we can resolve the fuzzy icon issue and if it makes it better.
See Also: → 1020813
You need to log in before you can comment on or make changes to this bug.