715709 - Rounded borders for active links

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect, P5)

Description

[Patrick Walton (:pcwalton)]

The stock browser and iOS have awesome looking rounded borders for active links being tapped on. It'd be great if we could do the same.

Comment 1

[Doug Turner (:dougt)]

madhava - need input.

Comment 2

[Madhava Enros [:madhava]]

Ian - do we want to do this following our rounding guidelines?

Comment 3

[Ian Barlow (:ibarlow)]

Attachment: Link selection specs

See attached specs. Let's add a 3px (based on mdpi) corner radius to selected links. Note that the selection should also extend roughly 2-3px beyond the left and right edges of the text, rather than stopping abruptly at the text edge as it does now.

Comment 4

[Madhava Enros [:madhava]]

Yes - looks much more polished.

Comment 5

[Ian Barlow (:ibarlow)]

Unassigning myself, this can be picked up by dev now :)

Comment 6

[Wesley Johnston (:wesj)]

Posting some thought for any contributors interested in grabbing this. Right now we style the links by setting them :active here:

http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js#2291

Then we style them active using css here (for gingerbread devices):

http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/gingerbread/content.css#342

and here for all others:

http://mxr.mozilla.org/mozilla-central/source/mobile/android/themes/core/content.css

We'd need to find some CSS that gives us the appearance ibarlow asked for in both places, or find a new way to do tap highlighting. I played with this for a sec once using something like

-moz-outline: 3px solid (color);
-moz-outline-radius: 3px;

Which gives nice results sometimes (if you remove the rgba color bits so that it looks ok on multiline links. But sites do crazy stuff with links, and it doesn't necessarily work everywhere. We also wouldn't want to use that style on buttons, so I'd pull them into their own style.

We'll have to test on as many websites as you can to get an idea of all the different ways links are used. A small test page and just test out different styles on desktop would also work. I wonder if QA has something like that...

Comment 7

[Matt Brubeck (:mbrubeck)]

Gautham Ilango is interested in working on this bug.

Comment 8

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.