We'd love to get rid of the jarring experience that occurs while using the e.me search bar on the homescreen. Currently, the keyboard will cause much jumpiness when it opens. The visual refresh fixes this by changing the position of the bar and flattening the UI. I've attached the design comps to this bug for reference.

I love it! Two things to consider, from my experience of playing with such concepts lately: 1. On 1.3 there will be apps on the home screen. With current layout, there will be a weird space between search bar and the apps. We shouldn't move the apps because they should still be aligned to icons on other pages of the home screen. 2. Using grey background with low opacity looks good on limited amount of wallpapers. On some, it looks extremely bad. In this case I'd suggest using solid black color with higher opacity.

Hi Peter, I'm almost done but I'm going to need the appropriate icons (or the PSD that has all the icons in it). The PSD I have access to only has the new search icon. It does not include the clear search icon. If you're providing the assets, I'll need them at 1, 1.5 and 2x. If you want me to cut and generate them, let me know what's the best way to generate the assets at 1.5 and 2x. The way I do it now is by changing the image size (in PS) to increase it by 50% (1.5x) or 100% (2x).

Gregor, What release will this work be slated into?

(In reply to Preeti Raghunath(:Preeti) from comment #5) > Gregor, > > What release will this work be slated into? This is target 1.2

Moving to koi+ as this is an ask from Andreas.

Hi Aus, Here are the exported icons at the various sizes. I also updated the spec to help with placing these icons correctly on the screen. Please refer to them. I am concerned about the 1.5x and 2x versions though in terms of layout, since these have not been spec'd out. Let's get in sync about this today if possible. Please ping me on IRC - I'm 'peterla' in the b2g and gaia channels.

Comment on attachment 819238 [details] Patch - v1 - Visual design refresh for e.me homescreen search (v1.2 branch specific) This review is for code only. I'll set-up another review with Visual Design.

Looking good! 2 small regressions from the current design (see attached screenshot): - the clear button is not vertically aligned with the text - when entering very, very, long text, it obscured by the clear button Thanks.

Comment on attachment 819238 [details] Patch - v1 - Visual design refresh for e.me homescreen search (v1.2 branch specific) Amir, I've updated the Pull Request with fixes for the two regressions you noted. Thanks for your help! :)

Comment on attachment 819238 [details] Patch - v1 - Visual design refresh for e.me homescreen search (v1.2 branch specific) I think the clear button is still 2px too high, but I'll let the visual review decide on that :) r+

I moved the clear button 2px down. :) Also, this has landed on v1.2 branch first because it was based off of this branch. Landing on master will happen with a different pull request as the code has changed enough to necessitate it. Commit for v1.2 landing: https://github.com/mozilla-b2g/gaia/commit/671caa631e338a06b5ea3be04cc43820701c6483 Fixed on v1.2 *only*.

Hi Aus, I emailed you already about this but I am posted my comments in this bug as well. I've gone over your changes and things are looking really good! There are just a few small things that need tweaking to get it to match the specs. I will be attaching 2 screenshots to show the adjustments I'm requesting. They are: 1. The 'I'm thinking of...' text is vertically off. It needs to be moved UP by 3 pixels (baseline should be at y = 51). 2. The search magnifying glass icon should be moved to the right by 2 pixels. 3. When entering search text, the text is also vertically off, this time it needs to be moved UP by 1 pixel (baseline again should be at y = 51). 4. The X delete icon is also slightly off. I noticed you moved it down 2 pixels in a previous comment. But it should be moved back up 2 pixels and to the left 3 pixels to match the spec. This should be aligned with the text once you do the text alignment in #3. Please see the following 2 attachments for an illustration of this. They are screenshots taken from a build from yesterday afternoon. There are also 2 more issues: 1. When swiping over to the full icon grid (left swipe), the background dims. But it should not dim at all. 2. When swiping over to the full icon grid, the e.me search bar should fade to 0% opacity. Currently it does not fade at all.

This screenshot illustrates adjustments #1 and #2 from above comment.

This screenshot illustrates adjustments #3 and #4 from above comment.

Hi Peter, I've fixed most of the issues you reported (at least, I think I did :)). What's still missing is the fade out on swipe and we don't show the cancel search button until there is a search term present (that was how it already behaved, we can change this if you want).

Hi Aus, There are still issues with the positioning of the text and icons in both screens. I feel it'll be difficult for me to describe it with any more detail and precision than I already have... my suggestion to you is this. Take the specs I sent earlier: Spec_EverythingDotMe1.jpg Spec_EverythingDotMe1-SearchPart1.jpg Spec_EverythingDotMe1-SearchPart2.jpg Then overlay your screenshots on top inside photoshop or any image editing program. Set opacity to 50% and observe the differences. Adjust until you see no difference at all. I think it's fine to leave the X behaviour as it is (only appearing when text is actually input). But I'd like to see the opacity animation + remove the dimming when you swipe over to the icon grid.

I should also mention that your font weight has increased since the last time I saw it. The font is too bold. It should be: 1) 'I'm thinking of...' - Fira Sans Thin Italic 8pt (1.9 REM) 2) Any search text that is input should be - Fira Sans Regular 8pt (1.9 REM) It's all in the spec images I attached originally. :)

Hi Aus, To summarize our discussion, the changes based on the latest simulator screenshots you showed me would be: 1) Landing Page - Text baseline is good, text slightly too large and wrong colour (should be #EEEEEE). It's also a bit too thick of a weight on the simulator. 2) Landing Page - Move icon to the left by 1 pixel 3) Search Page - Search text baseline needs to move up 1 pixel 4) Search Page - X icon needs to move left 1 pixel, up 2 pixels 5) Search Page - Search term matches baseline needs to move up 2 pixels Make sure text baseline matches on all screens. 6) Icon grid background should not dim when swiping over to the grid. 7) A nice-to-have is to make the search bar on the landing page fade when the user swipes over to the icon grid. Thanks, it's really close! Peter

Ok Peter, I think I have all of it in at this point, minus #7. I'm going to go ahead and commit the changes. It will be available in the 1.2 builds starting tomorrow for a final review by you.

Commit on v1.2: https://github.com/mozilla-b2g/gaia/commit/de70f4d9b7a8dd3ba2565184735094eaa2bd3d18

What I hope are the last series of changes just went in the v1.2 branch. Commit: https://github.com/mozilla-b2g/gaia/commit/2d1d932e56c478d979cb7506b2a4925c7dd93189

Hi Aus, Please see attached zip, with 3 side-by-side comparison screens showing the differences between the intended design and the implementation. There are still a few things off, esp. the alignment of the baseline of the text. There are also font weight problems. On the landing page, the font used does not appear to be Fira Sans. The icons are in the correct locations.

Final round of changes. It's unfortunately as good as it's going to get with our funky text rendering. :( Commit: https://github.com/mozilla-b2g/gaia/commit/e46d33d96c80c1da51a84ecd21c9f1aa65ea2b7d PR for master coming shortly.

Unfortunately, a lot of our partner devices don't package the correct fonts. I've had to list them in order of preference, only in the case of the placeholder text. We prefer Fira Sans Light at a weight of 300 but will fall back to Fira Sans (a lot of devices don't ship the light version but they ship a 300 weight version), and Feura Sans (most devices ship this, there is no light version, but there is a 300 weight version). I'll try and figure out what's going on with our partners and why they aren't packaging the latest fonts. It could be our own build config that's wrong as well. This will be a follow-up bug. All of the text baselines match the spec, verified with device screen shots and side-by-side comparison in photoshop. Here's the commit to the v1.2 branch: https://github.com/mozilla-b2g/gaia/commit/085876be10150c8ca837c0616be215e943d72ec0

Clearing my needinfo from Comment 4.

Ghislain - thanks. Can you attach screenshots of the latest build so I can take a look?

See above comment.

Here you go.

Peter, screenshots are from Nov 1. Geeksphone builds for v1.2 will also have the changes, but beware, the Keon build is a little unstable, so you may see some unrelated bugs that are not visual in a nature.

(In reply to Ghislain 'Aus' Lacroix from comment #33) > Peter, screenshots are from Nov 1. Geeksphone builds for v1.2 will also have > the changes, but beware, the Keon build is a little unstable, so you may see > some unrelated bugs that are not visual in a nature. Hi Aus, Thanks for the screenshots. Everything looks good except the baseline of the first line of text. It should be lined up 31 pixels below the status bar. Currently: Landing Page (I'm thinking of...): 29 px (2 px too high) Search Page (I'm thinking of...): 29 px (2 px too high) Search Page (user entered text): 32 px (1 px too low) If you need to, can you find someone to help out with this? We'll just end up filing another bug if this doesn't get fixed. Peter.

The bookmark button (#save-search) is not working and is visually off. More information: The bookmark icon indicates if the current search is bookmarked as a homescreen Collection [e.g., when searching for 'social' the bookmark icon is yellow since a 'Social Collection' exists on the homescreen] Tapping the icon should save the current search as a homescreen Collection and should update the icon from transparent to yellow. Thanks.

Moved placeholder text 2 pixels down and user input text 1 pixel up.

Comment on attachment 828259 [details] Patch - v2 - Visual design refresh for e.me homescreen search (master branch) Same fixes that are going into 1.2 regarding text baseline alignment. Fixed alignment of star (save-search) icon. Fixed clickable / draggable area below search input field.

Removing koi+ since it already landed on 1.2.

Aus - is the master patch ready for review?

there's a 'bookmark' icon that isn't clickable that should be. shouldn't be too hard to fix but i am prioritizing other work since the blocking portion of this bug has landed (it's on 1.2… which is why there was a big rush to get it in there first). I should, however, be able to find a little time this week to finish this.

Comment on attachment 828259 [details] Patch - v2 - Visual design refresh for e.me homescreen search (master branch) ok. thanks. clearing the review flag until the patch is ready.

Comment on attachment 829507 [details] Baseline Text Alignment.zip Hi Aus, I just checked this, sorry for the delay. It is still off. The screen that says 'crossfit' is the only one that is correct. The other two that say 'I'm thinking of...' are 2 pixels too low now, and the font looks slightly larger than in the spec. I must say at this point, there must be some way for you to check this alignment yourself against the specs. Going back and forth like this forever is wasting my time and also your time. Do you have image editing software that you can check this with? This has dragged on way too long.

I spent a bunch of time doing a full alignment with side by side screenshots in photoshop and for that round you told me that it was still off so I went ahead and changed things exactly like you said (2 pixels...) and now it is still off for you on your phone but, the opposite direction. I used the original design images attached to this bug. So yeah, this had taken a lot longer than it should and it's been very frustrating for me as well. It's fine if you don't want to do another ui review pass with screenshots. I'll simply re-align like I had previously and be done.

Here is a side-by-side comparison showing that things are actually aligned as expected. I know the font is wrong, there's nothing we can do about that for 1.2 anymore, partners simply do not ship the latest font. It falls back to the nearest it can. For our own builds on the phones everything is as designed. I don't know what else I can do here Peter. It's fine on my end and it's never fine on yours.

Comment on attachment 828259 [details] Patch - v2 - Visual design refresh for e.me homescreen search (master branch) Hi Amir, this is now ready for review! :) We're kind of in a rush so, since you already looked at this before I'm going to land it. The only change was to fix the save-search icon to make it clickable again (it was obscured by the search-title element).

needinfo? amirn just in case. :)

Now merged to master as well. Commit: https://github.com/mozilla-b2g/gaia/commit/e48c2025b97f26db6e23c16d72095143d731b1fa Resolving fixed. Post commit review issues will be addressed in a follow-up bug that will be opened if necessary.

Comment on attachment 828259 [details] Patch - v2 - Visual design refresh for e.me homescreen search (master branch) looks great! Thanks Aus :)

It seems like this landing might have regressed the launch time for some apps. See bug 942893. Its not immediately obvious to me why, but the other commits during that time period are in tests, android java code, or getUserMedia() which apps like contacts/messages/settings don't use as far as I know.

Please ignore comment 50. I was looking at the wrong regression range for gecko.

Verified the bug has been resolved on the latest 1.2 build. The e.me user experience is stable and fluid when searching for apps. Environmental Variables: Device: Buri v1.2 COM RIL BuildID: 20131202004001 Gaia: 075e60c878b0eca68fba9e00bc85cb6eac03578a Gecko: 14868788d50e Version: 26.0