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

RESOLVED FIXED in Firefox OS v1.2

Status

Firefox OS
Gaia::Everything.me
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: aus, Assigned: aus)

Tracking

(Blocks: 1 bug)

unspecified
1.3 Sprint 5 - 11/22
x86
Mac OS X

Firefox Tracking Flags

(blocking-b2g:1.3+, b2g-v1.2 verified)

Details

(Whiteboard: [systemsfe])

Attachments

(7 attachments, 8 obsolete attachments)

210.73 KB, image/jpeg
Details
214.58 KB, image/jpeg
Details
208.33 KB, image/jpeg
Details
547.18 KB, application/zip
Details
122 bytes, text/html
amirn
: review+
Details
128 bytes, text/html
amirn
: review+
Details
374.84 KB, image/png
Details
(Assignee)

Description

4 years ago
Created attachment 816129 [details]
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.
(Assignee)

Comment 1

4 years ago
Created attachment 816130 [details]
Spec_EverythingDotMe1-SearchPart2.jpg
(Assignee)

Comment 2

4 years ago
Created attachment 816131 [details]
Spec_EverythingDotMe1.jpg

Comment 3

4 years ago
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.

Updated

4 years ago
Whiteboard: [systemsfe]
(Assignee)

Comment 4

4 years ago
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).
Flags: needinfo?(pla)
Gregor,

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

This is target 1.2
Flags: needinfo?(anygregor)
Moving to koi+ as this is an ask from Andreas.
blocking-b2g: --- → koi+

Comment 8

4 years ago
Created attachment 819024 [details]
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.
Flags: needinfo?(pla)
(Assignee)

Comment 9

4 years ago
Created attachment 819238 [details]
Patch - v1 - Visual design refresh for e.me homescreen search (v1.2 branch specific)
(Assignee)

Comment 10

4 years ago
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.
Attachment #819238 - Attachment mime type: text/plain → text/html
Attachment #819238 - Flags: review?(evyatar)
Attachment #819238 - Flags: review?(evyatar) → review?(amirn)
Created attachment 819448 [details]
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.
(Assignee)

Comment 12

4 years ago
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+
Attachment #819238 - Flags: review?(amirn) → review+
(Assignee)

Comment 14

4 years ago
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*.
status-b2g-v1.2: --- → fixed

Updated

4 years ago
Keywords: verifyme

Updated

4 years ago
Duplicate of this bug: 907730

Comment 16

4 years ago
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

4 years ago
Created attachment 821965 [details]
FixScreenshot-of-Implementation1.jpg

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

Comment 18

4 years ago
Created attachment 821966 [details]
FixScreenshot-of-Implementation2.jpg

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

Comment 19

4 years ago
Created attachment 821980 [details]
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).
Attachment #821980 - Flags: review?(pla)

Comment 20

4 years ago
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

4 years ago
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. :)
Target Milestone: --- → 1.3 Sprint 3 - 10/25

Comment 22

4 years ago
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
(Assignee)

Comment 23

4 years ago
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.
(Assignee)

Comment 25

4 years ago
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

4 years ago
Created attachment 824381 [details]
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.
Target Milestone: 1.3 Sprint 3 - 10/25 → 1.3 Sprint 4 - 11/8
(Assignee)

Comment 27

4 years ago
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.
(Assignee)

Comment 28

4 years ago
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

4 years ago
Clearing my needinfo from Comment 4.

Comment 30

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

Comment 31

4 years ago
See above comment.
Flags: needinfo?(aus)
(Assignee)

Comment 32

4 years ago
Created attachment 826087 [details]
Nov 1st Implementation Screenshots

Here you go.
Attachment #819448 - Attachment is obsolete: true
Attachment #821965 - Attachment is obsolete: true
Attachment #821966 - Attachment is obsolete: true
Attachment #821980 - Attachment is obsolete: true
Attachment #824381 - Attachment is obsolete: true
Attachment #821980 - Flags: review?(pla)
Flags: needinfo?(aus)
(Assignee)

Comment 33

4 years ago
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.
Flags: needinfo?(pla)
(Assignee)

Comment 34

4 years ago
Created attachment 828259 [details]
Patch - v2 - Visual design refresh for e.me homescreen search (master branch)
Attachment #828259 - Flags: review?(amirn)
(Assignee)

Updated

4 years ago
Attachment #828259 - Attachment mime type: text/plain → text/html

Comment 35

4 years ago
(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.
Flags: needinfo?(pla)
Created attachment 829439 [details]
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.
(Assignee)

Comment 37

4 years ago
Created attachment 829507 [details]
Baseline Text Alignment.zip

Moved placeholder text 2 pixels down and user input text 1 pixel up.
Attachment #826087 - Attachment is obsolete: true
(Assignee)

Updated

4 years ago
Attachment #829507 - Flags: ui-review?(pla)
(Assignee)

Comment 38

4 years ago
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.
Attachment #828259 - Attachment description: Patch - v1 - Visual design refresh for e.me homescreen search (master branch) → Patch - v2 - Visual design refresh for e.me homescreen search (master branch)
Removing koi+ since it already landed on 1.2.
blocking-b2g: koi+ → 1.3+
Aus - is the master patch ready for review?
(Assignee)

Comment 41

4 years ago
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.
Target Milestone: 1.3 Sprint 4 - 11/8 → 1.3 Sprint 5 - 11/22
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.
Attachment #828259 - Flags: review?(amirn)

Comment 43

4 years ago
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.
Attachment #829507 - Flags: ui-review?(pla) → ui-review-
(Assignee)

Comment 44

4 years ago
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.
(Assignee)

Comment 45

4 years ago
Created attachment 8337071 [details]
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.
Attachment #829439 - Attachment is obsolete: true
Attachment #829507 - Attachment is obsolete: true
(Assignee)

Comment 46

4 years ago
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).
(Assignee)

Comment 47

4 years ago
needinfo? amirn just in case. :)
Flags: needinfo?(amirn)
(Assignee)

Comment 48

4 years ago
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.
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Comment on attachment 828259 [details]
Patch - v2 - Visual design refresh for e.me homescreen search (master branch)

looks great! Thanks Aus :)
Attachment #828259 - Flags: review?(amirn) → review+

Updated

4 years ago
Flags: needinfo?(amirn)

Comment 50

4 years ago
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

4 years ago
Please ignore comment 50.  I was looking at the wrong regression range for gecko.
Blocks: 925925

Updated

4 years ago
Depends on: 942845

Updated

4 years ago
No longer depends on: 942845
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
status-b2g-v1.2: fixed → verified
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.