925970 - [Gaia] [e.me] Implement visual refresh to e.me homescreen search bar

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Everything.me, defect)

Description

[Aus Lacroix [:aus]]

Attachment: Spec_EverythingDotMe1-SearchPart1.jpg

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.

Comment 1

[Aus Lacroix [:aus]]

Attachment: Spec_EverythingDotMe1-SearchPart2.jpg

Comment 2

[Aus Lacroix [:aus]]

Attachment: Spec_EverythingDotMe1.jpg

Comment 3

[Fade Rudnitsky]

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.

Comment 4

[Aus Lacroix [:aus]]

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).

Comment 5

[Preeti Raghunath(:Preeti)]

Gregor,

What release will this work be slated into?

Comment 6

[Gregor Wagner [:gwagner]]

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

This is target 1.2

Comment 7

[Preeti Raghunath(:Preeti)]

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

Comment 8

[Peter La]

Attachment: Updated Source, Specs and Exported Icons @ 1x, 1.5x, 2x Sizes

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 9

[Aus Lacroix [:aus]]

Attachment: Patch - v1 - Visual design refresh for e.me homescreen search (v1.2 branch specific)

Comment 10

[Aus Lacroix [:aus]]

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.

Comment 11

[Amir Nissim (:amirn)]

Attachment: text-overflow.png

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 12

[Aus Lacroix [:aus]]

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 13

[Amir Nissim (:amirn)]

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+

Comment 14

[Aus Lacroix [:aus]]

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*.

Comment 16

[Peter La]

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.

Comment 17

[Peter La]

Attachment: FixScreenshot-of-Implementation1.jpg

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

Comment 18

[Peter La]

Attachment: FixScreenshot-of-Implementation2.jpg

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

Comment 19

[Aus Lacroix [:aus]]

Attachment: visual-fixes.zip

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).

Comment 20

[Peter La]

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.

Comment 21

[Peter La]

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. :)

Comment 22

[Peter La]

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

Comment 23

[Aus Lacroix [:aus]]

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.

Comment 24

[Aus Lacroix [:aus]]

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

Comment 25

[Aus Lacroix [:aus]]

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

Comment 26

[Peter La]

Attachment: ImplementationDiscrepanciesOct29.zip

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.

Comment 27

[Aus Lacroix [:aus]]

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.

Comment 28

[Aus Lacroix [:aus]]

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

Comment 29

[Peter La]

Clearing my needinfo from Comment 4.

Comment 30

[Peter La]

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

Comment 31

[Peter La]

See above comment.

Comment 32

[Aus Lacroix [:aus]]

Attachment: Nov 1st Implementation Screenshots

Here you go.

Comment 33

[Aus Lacroix [:aus]]

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.

Comment 34

[Aus Lacroix [:aus]]

Attachment: Patch - v2 - Visual design refresh for e.me homescreen search (master branch)

Comment 35

[Peter La]

(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.

Comment 36

[Amir Nissim (:amirn)]

Attachment: bug - bookmark icon is visually off

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.

Comment 37

[Aus Lacroix [:aus]]

Attachment: Baseline Text Alignment.zip

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

Comment 38

[Aus Lacroix [:aus]]

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.

Comment 39

[Gregor Wagner [:gwagner]]

Removing koi+ since it already landed on 1.2.

Comment 40

[Amir Nissim (:amirn)]

Aus - is the master patch ready for review?

Comment 41

[Aus Lacroix [:aus]]

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 42

[Amir Nissim (:amirn)]

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 43

[Peter La]

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.

Comment 44

[Aus Lacroix [:aus]]

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.

Comment 45

[Aus Lacroix [:aus]]

Attachment: SideBySide.png

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 46

[Aus Lacroix [:aus]]

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).

Comment 47

[Aus Lacroix [:aus]]

needinfo? amirn just in case. :)

Comment 48

[Aus Lacroix [:aus]]

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 49

[Amir Nissim (:amirn)]

Comment on attachment 828259 [details]
Patch - v2 - Visual design refresh for e.me homescreen search (master branch)

looks great! Thanks Aus :)

Comment 50

[Ben Kelly [:bkelly, not reviewing]]

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.

Comment 51

[Ben Kelly [:bkelly, not reviewing]]

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

Comment 52

[Nikolai Khristoforov]

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