Closed Bug 950208 Opened 11 years ago Closed 10 years ago

[meta] Email Visual Refresh


(Firefox OS Graveyard :: Gaia::E-Mail, defect)

Not set



2.0 S3 (6june)
feature-b2g 2.0


(Reporter: padamczyk, Assigned: jrburke)



(Whiteboard: ux-tracking, visual design, visual-tracking, bokken, [p=13])


(7 files)

Meta bug for visual design refresh of the email app
No longer depends on: sms-visual-refresh, 950177
Blocks: 950209
No longer blocks: 950209
Blocks: 950751
No longer blocks: 950751
Alias: Email-VSD-Refresh
Blocks: SysFE
No longer blocks: SysFE
Alias: Email-VSD-Refresh → Email-1.4-VSD
Summary: [VsD Refresh][Meta] Email Visual Updates → [meta] 1.4 Email Visual Refresh
Depends on: 951070
Depends on: 951078
Depends on: 951081
Depends on: 951085
Depends on: 951089
Depends on: 951091
Depends on: 951093
Blocks: 965889
No longer blocks: 965889
Alias: Email-1.4-VSD → Email-VSD
Summary: [meta] 1.4 Email Visual Refresh → [meta] Email Visual Refresh
Alias: Email-VSD → Email-Refresh
Target Milestone: --- → 1.5 S3 (6june)
Alias: Email-Refresh → Email
("Email" is way too generic an alias to use in bugzilla since there is a single aliasing namespace across the entire installation.  Also, an alias is not useful if it changes a lot; since this one has changed 5 times I think we can conclude an alias is not needed for this case and people are fine with the bug number.)
Alias: Email
Sorry, Andrew. Cleaning up a lot of bugs that weren't mine.
blocking-b2g: --- → 2.0?
blocking-b2g: 2.0? → ---
Depends on: 940132
Depends on: 1010673
Flags: in-moztrap?(nhirata.bugzilla)
Attached image screen-samples-1.png
Posting some screenshots with current state of the dev branch. These were taken on a hamachi. If you want to try a version of the app with the changes, it is here (built for a hamachi screen resolution):

work is being done in this branch, diff view:

Some notes:

1) changes for centering of titles in the header just landed across the apps. So if something looks weird, it will likely get fixed soon when they land cleanup changes.

2) Bug 1010673 is tracking an update to make sure all the icons are correct. There are some that are not at the moment.

3) When viewed on an actual hamachi device, the gray header areas in message compose and message view look washed out, hard to see unless viewing at a particular angle.

4) For Compose, at least right now, the code adds a "summary" area for multiple attachments and the total file size. You can see it in the third row, second column in the attached graphic. This is not part of the vxd but since the code was doing that summary before, figured it might want to be kept, to give the user an idea of the total attachment size. However, if UX feels like it should be taken out, just let me know.

5) The unread count in the message list header is not shown right now. I will likely file a separate bug for that, as it will require more code changes, and the rest of this work can land on its own. Same thing with the vxd showing a Reply with the original message in a gray quoted area: not in this changeset, that work will be tracked in a specific bug for that work.

At this point, I am open to hearing about design tweaks. I recommend trying out the app zip. Once bug 1010673 has a full set of updated images, if I do not hear about any design changes, I will likely then proceed with review and landing what is there so far. We can always file smaller follow on fixes once this code lands, as we use it.
Hi James,

Thanks for the updates!! Looks great!! 
I've installed the branch to see from Unagi device. And I am not sure was because the device or some other reason, there are very little things may needs you fix. So I've put them together in a spec to show some stuff that needs to be tweaked. Mainly are font weight issues on the message list. And I also agree with you on the washout background in massage compose area, so also updated the new color for it. Beside these two things, just some icon update and the header issue, which likely get fixed soon when they land cleanup changes and my icon update. Thank you James!! And for the "summary" area in compose view, I will check with UX on this. 

Rough draft test case created; will need to update and finalize :
Flags: in-moztrap?(nhirata.bugzilla) → in-moztrap+
I applied the font weighting feedback and the updated set of icons. The hidpi version is looking sharp now!

Some app zips to try, normal:


Outstanding vxd feedback, once these are resolved and if there is nothing new from these updates, then I will proceed with dev review:

1) The message reader/compose gray background color that looked washed out on unagi/hamachi: the suggestion in comment 4's zip was to use a background color of #f2f2f2. However, that is the color currently in use, so I did not do any updates there.

2) Compose attachments summary (shown when multiple attachments are attached): should it be removed or kept? If kept, is the existing visual OK?

Note that headers may still be a bit odd looking, but updates for those should happen in other bugs related to the shared/ styles.
Flags: needinfo?(fshih)
One other thing I just noticed: the reply icon does not appear to be symmetric. While tapping refresh in the message list, you can see that it will wobble a bit.

This can be confirmed in a graphics program by overlaying 90 degree-rotations of the image on top of each other: the line gets wider, where if it was symmetric, it should stay a similar thickness to the original thickness without the overlayed rotations.
I also noticed some of the icons were fuzzy, but they are in the shared/style area. I filed a separate bug for those since they are in the shared area, bug 1013783, but if the visual design people involved in this bug also would provide those images, feel free to attach a zip of them to that other bug and I will take the bug to merge the files into the tree.
Apparently the Flame device uses @1.5x icons, so the 2.0 icons are less important for that device, but I would like to have them all sorted anyway since we are doing the the update. 

The 1.5x, the refresh icon also wobbles, so any update for the refresh icon should be for all sizes.

For the other work that was shown in the VXD docs that will not be included in this update, they are tracked in separate bugs since they require a bit more work:

* Bug 800402: show the number of unread messages in the message-list header after the folder name
* Bug 940365: remove original message when replying
Attached file Email_Bug
Hi James,

Thanks for the great updates! I’ve downloaded the zip and tried on devices, they are looking great!! 

As you said has found some fuzzy icons in hidpi and flame device. So I’ve fixed it and will be updating it on bug 1013783. Also fixed the refresh icon, you can find it in this attached. 

For the compose attachments summary, I think we kept it and I’ve also made a visual spec for it, which you can refer to the first page of the file attached.  

And while I'm looking at email list, I found that text are sort of overlapping with the icon, when there is an attachment icon at the end. Is that possibly we can leave a little gap in between? I’ve also attached the image (spec page 2). 

Flags: needinfo?(fshih)
Thanks Fang! Here is an updated app zip with the changes you outlined (generated for @1.5x devices like the Flame, but should also work on @1x devices):

Some of the header icons may not appear hires, that is being tracked in bug 1013783. However, I confirmed the rest of our header icons will be hires when that lands.

I think it is really close now. I just noticed a couple things that are missing though:

1) The "starred" state in the message reader. If the user stars the email, by tapping on the "flag" icon in the message reader, we do not have a "flag on" state. There is a small orange flag that will show up in the message list though.

Right now, the image for that star/flag in the message reader is blank if the user has starred the message. Maybe create the image and name it "star_on.png", with similar dimensions to the star.png image (and in all the @ sizes we have).

2) Similarly, for those bottom buttons in the message reader, there is no "_press" state for those icons, for when the user presses and the background changes blue with the icons usually turning white.

Perhaps that is not the new design style though, to have pressed icons. If they should be there though, then _press versions of those icons are appreciated. It is probably worth
Flags: needinfo?(fshih)
Blocks: 1017039
Attached file
Hi James, I’ve made a "flag on” icon with orange flag, for show up when the message “starred”. And for those bottom buttons in the message reader, I believe they are no longer turning white when the user presses, the only changes is the background changes blue. That is the latest design style for now. Thank!
Flags: needinfo?(fshih)
Attached image 2014-05-28-14-29-33.png
Hey James, I've also installed this patch on my flame device, and the arrow icon (back and next message) in the header of the message reader still looks fuzzy for some reason. You can refer to the file attached. I was wondering is it image issue or? Thanks!
Attached file GitHub pull request
Asking :mcav for dev review to spread the review love around, and he has recent experience with some of the affected areas.

Fang: Thanks for star_on icon. The fuzzy next/previous buttons was because bug 1013783 had not landed yet in that branch, but it is landed now.

Here is an app zip generated for 1.5x resolution devices based on the contents of this pull request:

Based on the review comments of previous revisions of the app zips, I believe this meets UX/Visual Design requirements, so if this passes dev review I will land it. 

However, if UX/Visual Design has concerns, please let me know within the next day, as I hope to land it this week. The only changes in this zip as compared to the previous the -3 version is the star_on image, and a rebase over latest master code (which includes the sharp next/previous icon changes).
Attachment #8430435 - Flags: review?(m)
Whiteboard: ux-tracking, visual design, visual-tracking, bokken → ux-tracking, visual design, visual-tracking, bokken, [p=13]
Comment on attachment 8430435 [details] [review]
GitHub pull request

Looks good! I made a couple of comments on the alignment of the "To:" headers; the style for message_reader's version seems simple to fix, so it'd be nice if we could get that tweak in; the compose version seems harder and maybe less noticeable, so probably not worth addressing here unless you see a simple way to fix it.

Everything looks really nice, feels like a new app, good work! r=mcav
Attachment #8430435 - Flags: review?(m) → review+
Hi James, 
I also install the patch, it looks like a brand new email! cool!

Somehow I just found that in compose view the "To/cc/bcc" field is scrollable?
It seems like there are some misunderstanding here between me & Fang...sorry about that :(
Can you change it back to original design?

Also, I'm thinking of some ideas to avoid the to/cc/bcc field taking too much space of the foreground in the small screen device, such as always automatically scrolling the screen to where the cursor is. 
So I suggest it'd better keep the to/cc/bcc field always expand right now and we could make the implementation on next version.
I just pushed some changes based on :mcav's feedback about font baselining. :mcav, I also tried to fix the compose one, you may want to check it out again.

Juwei, I changed it so the compse addresses are not independently scrollable. Here is a new zip file to try, and I will wait for explicit OK from you before merging:
Flags: needinfo?(jhuang)
It looks great! Thank you :)
Need info Fang to confirm.
Flags: needinfo?(jhuang) → needinfo?(fshih)
I was wondering if we can keep the title ( "to:" or "cc:" and "bcc" ) stays on the first line when we have many rolls of contacts instead of staying in the last roll. So the user are able to tell what are those contacts under. Hope this is not too late to change...: (
Flags: needinfo?(fshih)
Here is an update with the to/cc/bcc and the + icon at the top:

Does that look OK?
Flags: needinfo?(fshih)
Attached image addr-top.png
Screen capture showing to the to/cc/bcc staying at the top with the add icon as more addresses are added.
(In reply to James Burke [:jrburke] from comment #20)
> Here is an update with the to/cc/bcc and the + icon at the top:
> Does that look OK?

YES!!! It looks great! Thank You!! : )
Flags: needinfo?(fshih)
Merged in master:

from pull request:
Closed: 10 years ago
Resolution: --- → FIXED
Assignee: nobody → jrburke
Email refresh is a blocker to 2.0 Visual Refresh.
blocking-b2g: --- → 2.0?
blocking-b2g: 2.0? → ---
feature-b2g: --- → 2.0
You need to log in before you can comment on or make changes to this bug.