UITour: Style doorhanger menu for Australis Update Tour

VERIFIED FIXED in Firefox 29

Status

()

defect
P3
normal
VERIFIED FIXED
6 years ago
5 years ago

People

(Reporter: Habber, Assigned: Unfocused)

Tracking

unspecified
Firefox 29
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [strings])

Attachments

(7 attachments, 2 obsolete attachments)

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

Updated

6 years ago
Flags: needinfo?(mmaslaney)
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
Flags: needinfo?(mmaslaney)
Reporter

Comment 2

6 years ago
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).
Flags: needinfo?(bmcbride)
Posted file Design Specs.zip (obsolete) —
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).
Assignee: nobody → bmcbride
Status: NEW → ASSIGNED
Flags: needinfo?(bmcbride)
(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...
Attachment #8360241 - Attachment is obsolete: true
Blocks: fx-UITour
OS: Mac OS X → All
Priority: -- → P3
Hardware: x86 → All
Posted image Screenshot - Windows
Attachment #8362292 - Flags: ui-review?(mmaslaney)
Posted image Screenshot - OSX
Attachment #8362293 - Flags: ui-review?(mmaslaney)
Posted image Screenshot - Linux
Attachment #8362294 - Flags: ui-review?(mmaslaney)
Posted patch Patch v1 (obsolete) — Splinter Review
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.
Attachment #8362297 - Flags: review?(MattN+bmo)
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 on attachment 8362292 [details]
Screenshot - Windows

• Adjust the padding-bottom to 30px
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
Attachment #8362293 - Flags: ui-review?(mmaslaney)
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
Attachment #8362294 - Flags: ui-review?(mmaslaney)
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?
Attachment #8362297 - Flags: review?(MattN+bmo) → feedback+
(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.
Posted patch Patch v1.1Splinter Review
Fixes up everything mentioned in comments 12-16.
Attachment #8362297 - Attachment is obsolete: true
Comment on attachment 8364811 [details] [diff] [review]
Patch v1.1

*cough*
Attachment #8364811 - Flags: review?(MattN+bmo)
(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.
(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?
Flags: needinfo?(mmaslaney)
(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
Let's create the emphasis by a decreasing the contrast of "Not now".

/* Not Now: */

color: rgba(0,0,0,0.35);
Flags: needinfo?(mmaslaney)
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?
Attachment #8364811 - Flags: review?(MattN+bmo) → review+
(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.
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
Whiteboard: [strings] → [strings][fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/0fe6a5fc9081
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Whiteboard: [strings][fixed-in-fx-team] → [strings]
Target Milestone: --- → Firefox 29
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.
Flags: needinfo?(bmcbride)
(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.
Flags: needinfo?(bmcbride)
(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.
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
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.