Markup for "blue link-looking things" in XUL

[Benjamin Smedberg]

In Larissa's design for CTP [1], there are several cases where there is
text which looks like a link. What is the recommended XUL markup for
this kind of text?

--BDS

1.
http://people.mozilla.com/~lco/CtP/current/130415%20CtP%20design%20spec.pdf
_______________________________________________
firefox-dev mailing list
firef...@mozilla.org
https://mail.mozilla.org/listinfo/firefox-dev

[Dão Gottwald]

<label class="text-link" value="your label" href="your URL"/>

For instance, see
http://hg.mozilla.org/mozilla-central/annotate/ea059733677c/browser/base/content/browser.xul#l403

Dao

[Gervase Markham]

On 09/05/13 14:29, Benjamin Smedberg wrote:
> In Larissa's design for CTP [1], there are several cases where there is
> text which looks like a link. What is the recommended XUL markup for
> this kind of text?

Can I take the opportunity to ask: why do we do that at all? I've always
thought it makes the UI look a bit hacked-together and aesthetically
unpleasing when it appears e.g. in the Firefox Preferences panel. There
seems to be no rule I can see about when a link is used and when a
button is used.

Gerv

[Stephen Horlander]

> Can I take the opportunity to ask: why do we do that at all? I've always
> thought it makes the UI look a bit hacked-together and aesthetically
> unpleasing when it appears e.g. in the Firefox Preferences panel. There
> seems to be no rule I can see about when a link is used and when a
> button is used.

I have to agree it doesn't look that great and we should probably not use link styled text directly in browser chrome. That said, the rule for when to use a link is when the action will take you out of your context and open a web page. Currently we are breaking this in several places and using links when we should be using buttons. The Sync and Privacy panes are particularly bad about this.

- Stephen

[Benjamin Smedberg]

On 5/9/13 10:47 AM, Stephen Horlander wrote:
>> Can I take the opportunity to ask: why do we do that at all? I've always
>> thought it makes the UI look a bit hacked-together and aesthetically
>> unpleasing when it appears e.g. in the Firefox Preferences panel. There
>> seems to be no rule I can see about when a link is used and when a
>> button is used.
> I have to agree it doesn't look that great and we should probably not use link styled text directly in browser chrome. That said, the rule for when to use a link is when the action will take you out of your context and open a web page. Currently we are breaking this in several places and using links when we should be using buttons. The Sync and Privacy panes are particularly bad about this.

Since I'm actively implementing the new doorhanger today and tomorrow,
can you suggest whether I should use a different presentation for the
"Learn more..." link? And what the presentation of the "Show all" link
on page 17 should look like?

--BDS

[Stephen Horlander]

> Since I'm actively implementing the new doorhanger today and tomorrow, can you suggest whether I should use a different presentation for the "Learn more..." link? And what the presentation of the "Show all" link on page 17 should look like?

I think we should stick with the current link treatment for "Learn More…" until we have a chance to reevaluate all of them. For "Show all" we should use a disclosure arrow next to the text e.g. http://cl.ly/image/3N31362t1z02

- Stephen

[Larissa Co]

On 5/9/13 12:56 PM, Stephen Horlander wrote:
>> Since I'm actively implementing the new doorhanger today and tomorrow, can you suggest whether I should use a different presentation for the "Learn more..." link? And what the presentation of the "Show all" link on page 17 should look like?
>
> I think we should stick with the current link treatment for "Learn More…" until we have a chance to reevaluate all of them. For "Show all" we should use a disclosure arrow next to the text e.g. http://cl.ly/image/3N31362t1z02
>
> - Stephen

Stephen, just in case this context changes things, the "Show All" link
shows up on pg. 17 (wireframe 3.5.1). It's an edge case which occurs
when the user clicks on in-content CtP and the doorhanger shows up. I
don't think this case has to be pretty, but I want to make sure you know
what it refers to.

http://people.mozilla.com/~lco/CtP/current/130415%20CtP%20design%20spec.pdf

Larissa

[Larissa Co]

>> Can I take the opportunity to ask: why do we do that at all? I've always
>> thought it makes the UI look a bit hacked-together and aesthetically
>> unpleasing when it appears e.g. in the Firefox Preferences panel. There
>> seems to be no rule I can see about when a link is used and when a
>> button is used.
> I have to agree it doesn't look that great and we should probably not use link styled text directly in browser chrome. That said, the rule for when to use a link is when the action will take you out of your context and open a web page. Currently we are breaking this in several places and using links when we should be using buttons. The Sync and Privacy panes are particularly bad about this.
>

> - Stephen
>
>
In my opinion, I'd like to keep a distinction between links and buttons.
A button performs an action such as Save or Cancel. A link navigates the
user to a different page. Even if this isn't obvious to the user, the
visual difference between a link and a button indicates the importance
of what they're doing. I.e., since the link is smaller, the function it
performs is often less significant and more easily reversible, whether
hitting a button represents a user choice.

That being said, we don't apply this rule consistently, and we should
fix that. Also, I am not opposed to a different visual treatment, even
one that doesn't look like a link at all. I just want to make sure that
we differentiate between the two for visual hierarchy.

In terms of the CtP UI, I've used the link when taking the user to a
SUMO page, and I've used buttons to reflect user choice. The only
ambiguous case I have is the "Show All" link on pg. 17, and I agree that
Stephen's design here http://cl.ly/image/3N31362t1z02 is a good solution
for removing that ambiguity.