Indicate when links are external (ie. when they'll open in a browser)

[mnquintana]

Sort of related to #328 – it would be useful if there were a trailing icon (much like Wikipedia) on every link in Settings view indicating that the link would open in a browser, and not in Atom internally. Currently the icon I have in mind is being used for the "View Code" button on a package's settings. This would make settings-view's behavior a lot more predictable whenever you click a link.

Here's an example:

[simurai]

I liked the initial idea, but after trying it out, I'm not sure anymore.

It adds a lot of extra "visual noise". And having icons left AND right looks a bit strange. I think on websites like Wikipedia it's great because links have no other icons. I wonder if there is another, more subtle way?

[simurai]

I wonder if there is another, more subtle way?

Maybe just an underline when hovering? Most links already do that and for the "buttons" it would like this:

[mnquintana]

It adds a lot of extra "visual noise". And having icons left AND right looks a bit strange. I think on websites like Wikipedia it's great because links have no other icons. I wonder if there is another, more subtle way?

Hmmm, I'm thinking the external link icon might be too big relative to the text (and the left icons). Maybe try making it smaller? I think part of the reason it adds more noise is that the stroke weight of the icon is kinda heavy, so I'm thinking that a smaller size would help compensate for that. It also is much less distracting to my eyes on the .author link than the .repo-link link, probably because of the color.

Other options I can think of:

• Maybe the icon would be hidden unless hovering? But no I think that would defeat the purpose of predictability (ie. you should know if a link is external before you even hover)
• Maybe try reducing the opacity of the icon?

Maybe just an underline when hovering? Most links already do that and for the "buttons" it would like this:

That might be a little too subtle. I'm not sure it would be obvious enough that that would indicate an external link (I feel like it might just come off as an odd aesthetic design choice).

EDIT: Whoops, somehow I didn't see the external link icons in the buttons. Yeah that is a little weird-looking... but the more I think about it the more I think the next things to try should be reducing the icon opacity and/or reducing the size.

[lee-dohm]

Don't all the "external" links go to GitHub? I mean, sure, they launch a web browser ... but I kind of view GitHub and Atom being different aspects of the same experience. If I could put something on my package entry that would take you to http://come.to.my.scam.site.com then I would think that is something that should have an indicator of being "external" not the link to my package's GitHub Issues page.

[mnquintana]

@lee-dohm Yeah, they all go to GitHub or atom.io. I do see what you mean about them being part of the same experience, and maybe it's just me, but I find it really jarring when programs knock me into a browser without warning. I mean, I spend plenty of time switching between Atom and a browser, but I'm controlling the switching, and I know exactly when I will be switching to a browser. The reason I brought this up is that it's not obvious what links in the settings-view will do that – you can certainly infer it if you think about it, and you will learn it the more you use Atom, but it can break your Flow if you're not expecting it to happen. This enhancement would ideally normalize expectations for link behavior in Atom.

[simurai]

Ok, tried to make them smaller and more faded:

Hmmm.. Yeah, it's better, but I think I'll keep my position about not cluttering up the UI too much. Most external links are somewhat expectable, except maybe the "Report Issue" button. That could open a modal and might be surprising if the browser pops up. But yeah.. the rest should be somewhat clear, no?

[mnquintana]

@simurai Yeah it does look a little weird still especially in the buttons. I just got another (much less noisy / obtrusive) idea for this – what about a tooltip on hover that shows the URL? I'm thinking that might be the best way to go now – it won't add any visual noise but you'll still be "warned" (and not only that, but you'll know exactly what URL your browser will open). What do you think?

EDIT: I also realized that the icons are much, much more obtrusive in Atom Light than Atom Dark, so that might be part of the reason it didn't seem obtrusive to me locally. I think it depends a lot on the hue, saturation, and brightness of the color used for text links and how it contrasts with the background color. (External link icons in buttons seem to always look weird though.)

[winstliu]

The tooltip on hover sounds like a nice idea to me. The only problem is that it still might look a bit weird for the buttons-I know I wouldn't expect a button to suddenly show me a tooltip :P.

[simurai]

Ok, here a quick test with adding tooltips:

Maybe ok, but probably by the time the tooltip appears, you would already have clicked the button.

[mnquintana]

@simurai Is there any way to shorten the delay time?

(I do think that even if there isn't, it's still a worthwhile addition anyway)

[jancborchardt]

More than the buttons it’s confusing that the package title itself opens a browser. And that already happens in the package list. So when you click the title and expect the detail view to be opened, rather your default browser opens.

(This gets especially annoying when you currently have Chrome open and Firefox is your default one, prompting the opening of another browser where you just wanted to go to a package detail.)