958673 - UITour: Style doorhanger menu for Australis Update Tour

Status: VERIFIED FIXED

(Firefox :: General, defect, P3)

Description

[Holly Habstritt Gaal [:Habber]]

Currently, the doorhanger menu at the start of the Australis Update Tour looks like this http://cl.ly/image/360W3K3n0z44

It contains:
- Title
- Description
- Firefox logo
- 2 buttons, side by side

Michael Maslaney has created designs for this menu, which he will share here. Please let us know if anything shown in his styles can not be implemented. 

Question: 
Instead of 2 buttons, are we able to have 1 button and one text link? For instance, this would allow the hierarchy of the choices to give more prominence to taking the tour than opting out.

Comment 1

[Michael Maslaney [:mmaslaney] ([e-mail])]

https://www.dropbox.com/s/yhbgm7di0yn5sgo/Onboarding_doorhanger.zip

This file contains the following:

• Mocks for the Windows and OSX doorhanger menu

• Specs for the CSS and margins

• fx logo assets

Comment 2

[Holly Habstritt Gaal [:Habber]]

Thanks, Mike! I love the details in the spec folder as well. 

Blair, please let us know if you need anything further details than what is in the .zip. Is the "not now" link possible at this time or is our only option right now to have buttons like what is currently in the door hanger (http://cl.ly/image/090q2v0b3O3c).

Comment 3

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Design Specs.zip

Mike: In the future, could you upload any assets/mockups/specs to bug as attachments? It gives us a more reliable and more permanent record than Dropbox does, and makes it much easier for us to find (and know which one is current).

Comment 4

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Holly Habstritt [:Habber] from comment #2)
> Is the "not now" link possible at this time or is our only
> option right now to have buttons like what is currently in the door hanger
> (http://cl.ly/image/090q2v0b3O3c).

It is - I'll just make it a button that can be optionally styled to *look* like a link :) Don't say I never got you anything for Christmas...

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: -Mocks.zip

Comment 6

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: -Assets.zip

Comment 7

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: -Spec.zip

Comment 8

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot - Windows

Comment 9

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot - OSX

Comment 10

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Screenshot - Linux

Comment 11

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Patch v1

This also adds the close button for bug 935823, since it affects the layout/CSS of the panel so much. But it does *not* include all of the desired behaviour, specifically that described in bug 935823 comment 1.

Comment 12

[Michael Maslaney [:mmaslaney] ([e-mail])]

Looking good, couple comments.

• OSX Version - The Firefox logo's right padding seems a little tighter than 18px

• Linux - Let's take the <p> font-size down a pixel, seems a little big to differentiate between the <h1>

• Linux - Increase the bottom padding to 30px

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

Comment on attachment 8362292 [details]
Screenshot - Windows

• Adjust the padding-bottom to 30px

Comment 14

[Michael Maslaney [:mmaslaney] ([e-mail])]

Comment on attachment 8362293 [details]
Screenshot - OSX


• OSX Version - The Firefox logo's right padding seems a little tighter than 18px

• Adjust padding-bottom to 30px

Comment 15

[Michael Maslaney [:mmaslaney] ([e-mail])]

Comment on attachment 8362294 [details]
Screenshot - Linux

• Linux - Let's take the <p> font-size down a pixel, seems a little big to differentiate between the <h1>

• Linux - Increase the bottom padding to 30px

Comment 16

[Matthew N. [:MattN]]

Comment on attachment 8362297 [details] [diff] [review]
Patch v1

Review of attachment 8362297 [details] [diff] [review]:
-----------------------------------------------------------------

I'll take a closer look at the CSS once Michael's feedback is addressed.

::: browser/themes/osx/browser.css
@@ +4056,5 @@
> +}
> +
> +#UITourTooltipDescription {
> +  font-size: 1.1rem;
> +  line-height: 1.7em;

One is "rem", and the other "em". Shouldn't they be consistent to scale together?

::: browser/themes/shared/UITour.inc.css
@@ +40,4 @@
>    font-weight: bold;
> +  -moz-margin-start: 0;
> +  -moz-margin-end: 0;
> +  margin: 10px 0 19px 0;

What does the -moz-margin-* achieve here? Since start and end are the same do we need this?

Comment 17

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Matthew N. [:MattN] from comment #16)
> One is "rem", and the other "em". Shouldn't they be consistent to scale
> together?

I can change it - I had it that way because I automatically think of line-height as relative to font-size (as opposed to anything else in the document).


> What does the -moz-margin-* achieve here? Since start and end are the same
> do we need this?

It's to override the default style for <xul:label> - just setting margin isn't enough.

Comment 18

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: Patch v1.1

Fixes up everything mentioned in comments 12-16.

Comment 19

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 8364811 [details] [diff] [review]
Patch v1.1

*cough*

Comment 20

[Zhenshuo Fang (:fang) - Firefox UX Team]

(In reply to mmaslaney from comment #14)
> Comment on attachment 8362293 [details]
> Screenshot - OSX
> 
> 
> • OSX Version - The Firefox logo's right padding seems a little tighter than
> 18px
> 
> • Adjust padding-bottom to 30px

Two comments here (apology in advance if they are already mentioned somewhere)

1. Can we place the "Show me more" on the right and "Not now" as a link on the left? it's just more consistent with OSX in general since the action is usually on the right and cancel is on the left

2. Can we emphasis more on "show me more" instead of "Not now"? right now "Not now" seems more obvious with the blue color.

Comment 21

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Zhenshuo Fang (:fang) - Firefox UX Team from comment #20)
> 1. Can we place the "Show me more" on the right and "Not now" as a link on
> the left? it's just more consistent with OSX in general since the action is
> usually on the right and cancel is on the left

Yea, the tour webpage can already specify the order.


> 2. Can we emphasis more on "show me more" instead of "Not now"? right now
> "Not now" seems more obvious with the blue color.

Mike?

Comment 22

[Alex Gibson [:agibson]]

(In reply to Blair McBride [:Unfocused] from comment #21)
> Yea, the tour webpage can already specify the order.

I'll see to changing the order of the buttons, thanks

Comment 23

[Michael Maslaney [:mmaslaney] ([e-mail])]

Let's create the emphasis by a decreasing the contrast of "Not now".

/* Not Now: */

color: rgba(0,0,0,0.35);

Comment 24

[Matthew N. [:MattN]]

Comment on attachment 8364811 [details] [diff] [review]
Patch v1.1

Review of attachment 8364811 [details] [diff] [review]:
-----------------------------------------------------------------

I don't like that we're making a lot of the panel CSS different than other panels and would prefer to either change the default styles for all panels or leave it the same. I don't see a good reason why this panel is so different that margins and font-sizes need to change.

::: browser/themes/linux/browser.css
@@ +1931,5 @@
>  
>  %include ../shared/UITour.inc.css
> +
> +#UITourTooltipDescription {
> +  font-size: 1.05rem;

One-off changes like these make me sad as they increase complexity.

::: browser/themes/shared/UITour.inc.css
@@ +108,5 @@
> +  -moz-appearance: none;
> +  background: transparent;
> +  border: none;
> +  box-shadow: none;
> +  color: #0096DC;

I was confusing this with label.text-link. Can we make button.button-link and label.text-link share the same CSS in toolkit. Then the mozapps usage can inherit it.

I wonder how it looks with an image when using .button-link?

Comment 25

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Matthew N. [:MattN] from comment #24)
> I don't like that we're making a lot of the panel CSS different than other
> panels and would prefer to either change the default styles for all panels
> or leave it the same. I don't see a good reason why this panel is so
> different that margins and font-sizes need to change.

Mike's probably better to comment on that, but my take is that this panel is inherently special. We *want* it to stand out a bit from the rest, be a bit different, pop out a bit more.


> I was confusing this with label.text-link. Can we make button.button-link
> and label.text-link share the same CSS in toolkit. Then the mozapps usage
> can inherit it.


Don't want to hold this bug up any more, so filed bug 966081.

> I wonder how it looks with an image when using .button-link?

Looks fine - label with an image next to it. No visual artefacts.

Comment 26

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Alright, any further tweaks need to be filed as separate bugs - be sure to needinfo me so I see them.

https://hg.mozilla.org/integration/fx-team/rev/0fe6a5fc9081

Comment 27

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/0fe6a5fc9081

Comment 28

[Alex Gibson [:agibson]]

Blair, can the web page tell if the user has clicked the close (x) button in the new style door hanger? 

Currently the door-hanger closes but nothing else happens.

Comment 29

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Alex Gibson [:agibson] from comment #28)
> Blair, can the web page tell if the user has clicked the close (x) button in
> the new style door hanger? 
> 
> Currently the door-hanger closes but nothing else happens.

Nope, that'd have to get added in bug 935823.

Comment 30

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to Blair McBride [:Unfocused] from comment #29)
> (In reply to Alex Gibson [:agibson] from comment #28)
> > Blair, can the web page tell if the user has clicked the close (x) button in
> > the new style door hanger? 
> > 
> > Currently the door-hanger closes but nothing else happens.
> 
> Nope, that'd have to get added in bug 935823.

Woo, hey, that kinda sorta breaks the update tour page, doesn't it? Lets sort THAT out in a P1 bug! Bug 966913.

Comment 88

[Catalin Varga [QA][:VarCat]]

Verified as fixed using the following environment:

FF 29
Build id:20140305004002
OS:Ubuntu 12.04 x86, Max Os x 10.8.5, Win 7 x64