Closed Bug 985459 Opened 7 years ago Closed 7 years ago

[User Story] Icon Scaling based on Grid Configuration and Screen Characteristics


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

Not set


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

2.0 S1 (9may)
feature-b2g 2.0
tracking-b2g backlog
Tracking Status
b2g-v2.0 --- fixed


(Reporter: pdol, Assigned: crdlc)



(Keywords: feature, Whiteboard: [ucid:System167, ft:systemsfe, 2.0],[p=4][systemsfe])

User Story

As a developer, I want my app icons to be able to scale to the appropriate size based on the app grid and screen resolution/size so that the icon always looks great.

Acceptance Criteria:
1. After providing my icon(s) per UX guidelines, I do not need to do additional work in order for my app icon to scale based on the grid configuration or screen characteristics.
2. The app icons automatically scale to the appropriate size as described by the homescreen visual design UX spec.


(5 files)

No description provided.
User Story: (updated)
Taking for now, but will release as appropriate.
Assignee: nobody → kgrandon
Blocks: 993116
Blocks: 993118
No longer blocks: 993116
User Story: (updated)
Summary: [User Story] Icon Scaling based on Grid Configuration → [User Story] Icon Scaling based on Grid Configuration and Screen Characteristics
Regarding icon requirements to developers, our current strategy is:

1) Require 256 & 512 sizes which will be scaled to the necessary size(s) needed by the Homescreen.

2) Provide recommended specific sizes (as a hypothetical example: 140, 80, etc.) that developers can submit if they wish to create their own pixel-perfect versions with their desired level of detail at those sizes.
blocking-b2g: --- → backlog
Whiteboard: [ucid:System167], [ft:systemsfe] → [ucid:System167, ft:systemsfe, 2.0]
Whiteboard: [ucid:System167, ft:systemsfe, 2.0] → [ucid:System167, ft:systemsfe, 2.0],[p=4]
Cristian - this bug is mainly about scaling and ensuring that the icons are the proper size for each screen. This is something that we quickly came up with a solution for user testing, but we probably need to refactor it now. There is a bunch of definitions and code in the zoom.js file. This handles the pinch-to-zoom and also icon sizing dimensions, we can change this though.

You can find visual designs here for various screen sizes:

Ideally we would come up with an algorithm that will do it's best to size the icons to the various screens (I don't think it would be good to have any hard-coded pixel values). If this seems interesting to you, feel free to take this - if not, no worries.
Flags: needinfo?(crdlc)
Depends on: 1006526
Assignee: kgrandon → crdlc
Flags: needinfo?(crdlc)
Whiteboard: [ucid:System167, ft:systemsfe, 2.0],[p=4] → [ucid:System167, ft:systemsfe, 2.0],[p=4][systemsfe]
Target Milestone: --- → 2.0 S1 (9may)
Attached file Github pull request
Thanks a lot for the review Kevin
Attachment #8418712 - Flags: review?(kgrandon)
Comment on attachment 8418712 [details]
Github pull request

Hey Cristian! Thanks for the work, this is looking really good! I think unfortunately some of the old code from the prototype might be screwing with you at different resolutions. I think we probably need to remove this line:

And either generate that or set the height of each icon in javascript based on gridIconSize.

I will attach a screenshot of what I am seeing.
Attachment #8418712 - Flags: review?(kgrandon)
Comment on attachment 8418712 [details]
Github pull request

Actually this seems like a pretty easy fix. I think I'm going to land your patch along with a follow-up, and we can tweak things later.
Attachment #8418712 - Flags: review+
Ok, landed your original patch here:

And a quick follow-up to address the icon height here:

If you have any concerns/fixes for my follow-up please let me know. I think there might be some weirdness with icon name truncation, but we can revisit that. Thanks a lot for your patch!
Closed: 7 years ago
Resolution: --- → FIXED
feature-b2g: --- → 2.0
Mass modify - set status-b2g-v2.0 fixed for fixed bugs under vertical homescreen dependency tree.
blocking-b2g: backlog → ---
You need to log in before you can comment on or make changes to this bug.