1390222 - Search overlaps the onboarding notification when window is resized

Status: RESOLVED DUPLICATE of bug 1392467

(Firefox :: New Tab Page, defect)

Description

[krupa raj [:krupa--use this to needinfo]]

Attachment: screenshot

57.0a1 (2017-08-14) (64-bit)/macosx

steps to reproduce:
1. Launch the latest nightly and make sure you are shown the onboarding notification (second session on a new profile or toggle the pref browser.onboarding.hidden to false)
2. Open a new tab
3. Resize the browser window to 1000x700

expected behavior:
There is no overlap when the browser window is resized.

observed behavior:
Search overlaps the onboarding notification when window is resized. See screenshot

Comment 1

[[e-mail]]

This will only happen when screen size is relatively small (1060px ~ 960px, onboarding will disappear under 960px)

I think we should not show above the search box as well. The quick fix might be to move the minimum resize width to ~1060(by carefully measure) to avoid the overlap.

Verdi, how do you think about this?

Comment 2

[:Gijs (out for now; he/him)]

(In reply to Fred Lin [:gasolin] from comment #1)
> This will only happen when screen size is relatively small (1060px ~ 960px,
> onboarding will disappear under 960px)
> 
> I think we should not show above the search box as well. The quick fix might
> be to move the minimum resize width to ~1060(by carefully measure) to avoid
> the overlap.
> 
> Verdi, how do you think about this?

1024px is the widest a number of people's screens go. Doesn't seem great to just not cater for that resolution (or anyone who even makes their window slightly narrower) at all. Even a high end 13" macbook "only" has a screen that's 1280 wide, and we will default our initial window size to be 3/4 of that, which will drop under the 1060 (but not 960).

Comment 3

[Verdi [:verdi] Best to slack me]

Attachment: fox-on-top.jpg

Gijs is right, if we make the cutoff 1060 a lot of people won't ever see onboarding. I think we should just move the page content down a bit like in this attached example.

Comment 4

[[e-mail]]

Kate, could you help bring this search bar position change discussion with Aaron?

Comment 5

[Ed Lee :Mardak]

There's already concerns of the content being pushed down too much already.

Comment 6

[Verdi [:verdi] Best to slack me]

Attachment: noonboarding.jpg

(In reply to Ed Lee :Mardak (PTO Aug 12 - Aug 20) from comment #5)
> There's already concerns of the content being pushed down too much already.

I can understand that but in this case it seems like a choice between no onboarding for a lot of users and a glimpse of Pocket story images (which would be covered anyway once there are onboarding notifications or snippets present).

Comment 7

[Aaron Benson]

Yeah, pushing the page down further is really not an option. We've trimmed things down as much as possible to make sure Pocket story headlines can be seen on our smallest target resolution (1366x768). 

I'd suggest making the notification bubble reduce down to a number in a circle (like a traditional notification badge). That way it communicates something is there for you to check out and it doesn't have to overlap the search field.

Comment 8

[Verdi [:verdi] Best to slack me]

Attachment: onerow-768.jpg

(In reply to Aaron Benson from comment #7)
> Yeah, pushing the page down further is really not an option. We've trimmed
> things down as much as possible to make sure Pocket story headlines can be
> seen on our smallest target resolution (1366x768). 
> 
> I'd suggest making the notification bubble reduce down to a number in a
> circle (like a traditional notification badge). That way it communicates
> something is there for you to check out and it doesn't have to overlap the
> search field.

That seems to prioritize Pocket over Onboarding which I don't think is the right tradeoff. What about making top sites just one row by default on 768 high screens?

Comment 10

[:Gijs (out for now; he/him)]

I'm sure this is a dumb question, but why can't the fox just move up? In the screenshot here and in bug 1390655, there's room above the search bar.

Comment 11

[Verdi [:verdi] Best to slack me]

(In reply to :Gijs from comment #10)
> I'm sure this is a dumb question, but why can't the fox just move up? In the
> screenshot here and in bug 1390655, there's room above the search bar.

Yeah as long as it's about moving things around, moving the fox up combined with moving the other stuff down could work.

Comment 12

[Kate Hudson :k88hudson]

I'll defer Aaron on this one; one thing I did notice is that the breakpoints for onboarding stuff are slightly different than what Activity Stream uses, perhaps whatever solution we go with should also include lining those up?

Comment 13

[Aaron Benson]

Have a fix for overlapping the search field on narrow windows .. more details here: https://mozilla.invisionapp.com/share/KFD2GYHWM#/248971014_New_Tab_-_Onboarding

Comment 14

[[e-mail]]

Attachment: not overlap with new spec

With quick style check, I found the message wont overlap after apply new spec, 
so implement bug 1392468 ([Onboarding] replace icon and change to the new position) could fix this issue. And since the speech bubble is not overlaped at all, we don't need to do Bug 1392472 (hide speech bubble to blue dot when resize to a smaller screen)

Comment 15

[[e-mail]]

how do you think about comment 14?

Comment 16

[Ed Lee :Mardak]

(In reply to Fred Lin [:gasolin] from comment #14)
> Created attachment 8899664 [details]
> And since the speech bubble is not overlaped at all, we don't need to do
> Bug 1392472 (hide speech bubble to blue dot when resize to a smaller screen)
Aaron, it looks like your most recent design has 37px spacing from the top of the page to the search box. Whereas currently, there's about 62px. Is whitespace / padding reduction intentional?

Comment 17

[Aaron Benson]

Yeah, the space between all sections should be 40px. This was to get Pocket story headlines up higher on the page for smaller screen/window sizes.

https://mozilla.invisionapp.com/share/QBD5BOJMJ#/249812144_New_Tab_-_Section_Measures


Outside of that, there have been changes made to onboarding notifications that will fix the issue of the chat bubble overlapping the search field.

https://mozilla.invisionapp.com/share/KFD2GYHWM#/248971014_New_Tab_-_Onboarding

Comment 18

[Verdi [:verdi] Best to slack me]

(In reply to Fred Lin [:gasolin] from comment #15)
> how do you think about comment 14?

We still need the changes outlined in https://mozilla.invisionapp.com/share/KFD2GYHWM#/248971014_New_Tab_-_Onboarding and https://docs.google.com/document/d/1XVowXtnAzzzyLcwdFiP6cx3l9_CNBadP9_7v17XJ40s/edit as the new speech bubble is taller and it looks like the AS content is moving higher to better accommodate Pocket.

Comment 19

[[e-mail]]

should fix in bug 1392467 and bug 1392467