1375783 - Make tour notification responsive (so the close button is visible even on a smaller window size)

Status: VERIFIED FIXED

(Firefox :: General, defect, P3)

Description

[Tim Guan-tin Chien [:timdream] (please needinfo)]

I am seeing complain on Slack that it's not obvious how to dismiss the tour notification, and get to the about:home launchers. It turned out the current design sets the minimum width to 1060px (!) and the close button is simply cut off on a small screen.

I have a band-aid patch (not part of the spec) to at least make sure the close button is visible.

Comment 1

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Bug 1375783 - Make onboarding tour notification responsive,

These CSS changes deviates from the design spec, so the close button is visible even on a smaller window size.

Review commit: https://reviewboard.mozilla.org/r/152084/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/152084/

Comment 2

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Attachment: Screen Shot 2017-06-23 at 3.11.44 PM.png

The added style makes the body text narrower on the smaller window, and hides the left-most "New to Nightly?" button to make way for other things. The body text is scrollable on the y-axis when the text overflows. The layout remains unchanged on non-narrow windows.

Narrow = width smaller or equal to 960px (totally a made up number).

Comment 3

[Fischer [:Fischer]]

Comment on attachment 8880722 [details]
Bug 1375783 - Make onboarding tour notification responsive,

https://reviewboard.mozilla.org/r/152084/#review157046

Thanks for this. This looks good to me. Just thah, this is going to be differrent from the current UI requirements so let's see verdi's thought.

Comment 4

[Dave Townsend [:mossop]]

Comment on attachment 8880722 [details]
Bug 1375783 - Make onboarding tour notification responsive,

https://reviewboard.mozilla.org/r/152084/#review157270

Comment 5

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 8880723 [details]
Screen Shot 2017-06-23 at 3.11.44 PM.png

Talked to verdi in person and we tweaked the dimensions a little bit, to a place we are happy with. I am going to push the patch to mozreview and land this.

Comment 6

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 8880722 [details]
Bug 1375783 - Make onboarding tour notification responsive,

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/152084/diff/1-2/

Comment 7

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Comment on attachment 8880722 [details]
Bug 1375783 - Make onboarding tour notification responsive,

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/152084/diff/2-3/

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e1284ab0a1a9
Make onboarding tour notification responsive, r=Fischer,mossop

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/e1284ab0a1a9

Comment 10

[Justin [:JW_SoftvisionQA]]

This issue has been verified on Win 10 x64.

Comment 12

[Marco Castelluccio [:marco]]

Note that the tour itself is not responsive. At 150% zoom level I can't see the select button at the end to dismiss the tour indefinitely.

I filed bug 1379026 about this.

Comment 13

[Tim Guan-tin Chien [:timdream] (please needinfo)]

Note that with bug 1358970 the notification will simply be hidden with smaller window size.

Comment 14

[Justin [:JW_SoftvisionQA]]

I have verified that the close button is visible on smaller screen sizes on Win 10 x64, Win 7 x32, Ubuntu 16.04 x32, and Mac 10.12 with Firefox 58.