435697 - replace -moz-focus-inner on button:active state with CSS compliant outline style in forms.css

Status: RESOLVED DUPLICATE of bug 140562

(Core :: Layout: Form Controls, defect)

Description

[Nochum Sossonko [:Natch]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9) Gecko/2008051206 Firefox/3.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9) Gecko/2008051206 Firefox/3.0

To remove the annoying inner-border style on button elements a site would have to either call this.blur() or set -moz-focus-inner which most site authors aren't really aware of.

This is especially a problem being that the non-compliant IE does use the outline style property to implement their border (which in my opinion is way nicer than the overly-apparent and usually mis-aligned firefox :active border), so it would be nice to have a cross-browser way of easily removing that style!!

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

[Nochum Sossonko [:Natch]]

Well IE doesn't use the outline style (to my knowledge the don't even support it) but then again they don't have any dotted border on the button:active state.


Still the style should be changed to more compliant (hence more accessible) code!

Comment 2

[Boris Zbarsky [:bzbarsky]]

Interesting idea.  Outline wasn't around when this code was initially written, of course...  It might indeed make sense to use it now.

I'll look into doing that.

Comment 3

[Nochum Sossonko [:Natch]]

It's actually pretty simple, just a question of ui, I've already patched my firefox, it just takes taking out all the moz-focus-inner styles on button tags and replacing it with one declaration:

button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="file"] > input[type="button"]:focus {
  outline: 1px dotted ButtonText;
}

Comment 4

[Boris Zbarsky [:bzbarsky]]

Doesn't that put the outline on the outside of the button instead of around the text?

Also, that doesn't remove the current space we leave for the focus-inner thing, which I think we might want to remove.

So the actual change might be a little more involved, and will of course need to be tested on all 3 of Mac/Windows/Linux, thanks to the wonders of native theming.  :(

Comment 5

[Dão Gottwald [:dao]]

Attachment: proof-of-concept patch

(In reply to comment #4)
> Doesn't that put the outline on the outside of the button instead of around the
> text?
> 
> Also, that doesn't remove the current space we leave for the focus-inner thing,
> which I think we might want to remove.

yep

Comment 6

[Boris Zbarsky [:bzbarsky]]

Note that last I checked said space is added in C++; if we're eliminating it we should also ditch all that C++ code.

Comment 7

[Nochum Sossonko [:Natch]]

Part of my original intention with this bug was to remove the border/outline on
the inside of the button since it doesn't necessarily compliment the Vista
style buttons. Obviously that is specific to Vista, but I think it might be
useful to get rid of it entirely, and for the sake of making buttons have a
generic :focus look, the outline should probably suffice (I've found that with
<button><img><button> setups it comes out much nicer).

I guess though that anyway if it should be a standard css property, any site
author would be able to optimize the appearance.

;)

Comment 8

[Boris Zbarsky [:bzbarsky]]

Well, the original button look was designed to in fact match Windows... ;)

At this point we need a clear description of what focused buttons are expected to look like on all our supported OSes (including pre-Vista windows).

> I guess though that anyway if it should be a standard css property, any site
> author would be able to optimize the appearance.

That's not necessarily a good thing (e.g. we might want to use a !important rule here precisely to prevent that).

Comment 9

[Nochum Sossonko [:Natch]]

>That's not necessarily a good thing (e.g. we might want to use a !important
>rule here precisely to prevent that).

Why? Links are using this exact method of outlining and it's overrideable.

Comment 10

[Boris Zbarsky [:bzbarsky]]

Because things are not standard OS controls.  That's not so say that it _shouldn't_ be overridable.  Just that it's not a given that it should.

One other thing: any solution here needs to do sane things on controls where the author of the page has set border/padding in a stylesheet.  So the 5px thing in the attached patch is probably not good enough.

Comment 11

[Nochum Sossonko [:Natch]]

As of now -moz-focus-inner on buttons is also overrideable, hence even now it's possible to restyle the default focus look.

I'll say, I agree that there should be some kind of way of knowing what's focused (for a11y especially), as keyboard navigation is somewhat destroyed without that, but just noting that as of now it isn't implemented. However, the reason to remove the inner border is just so that the repainted focus button should be visible, (you can see it now by right-clicking on any button and then hovering over it, which paints it as focused without the border), the blue (or other color in other platforms is quite nice).

>That's not necessarily a good thing (e.g. we might want to use a !important
>rule here precisely to prevent that).

Isn't that overrideable with another !important style?

Comment 12

[Boris Zbarsky [:bzbarsky]]

> Isn't that overrideable with another !important style?

Not if it's a UA stylesheet !important rule.

Comment 13

[Nochum Sossonko [:Natch]]

Attachment: Proof-of-concept proved.

This is just an html page that shows the difference between button and inputs before and after applying the patch. Had to jump through a few hoops to get this to work, one thing I had to do though that was a little strange was overflow:hidden, otherwise buttons that can't hold their values get the extra space, even though nothing is visually given to them, and then outline is calculated around that.

Comment 14

[Nochum Sossonko [:Natch]]

The dotted line in buttons is definitely _not_ the way things look on Vista. IE7/IE8 don't do it, and neither does any other button on Vista do it. IMHO, it's actually pretty ugly, and can ruin website designs where an image is used for the button.

That's not really what this bug is about, the bug is really about removing -moz-focus-inner with Dao's patch. For the results of that patch, see attachment 339361 [details].

Comment 15

[Emil Ivanov]

I remember that finding this property to disable the inner focus was not easy.
It's not ugly on Vista only, it's ugly on XP too when the button is with padding, very different from IE's behavior which outline is inside, close to the border.

Comment 16

[Nochum Sossonko [:Natch]]

I think this is invalid now, with the new button styling. Correct me if I'm wrong.

Comment 17

[Emil Ivanov]

(In reply to comment #16)
> I think this is invalid now, with the new button styling. Correct me if I'm
> wrong.

If you mean by "the new button styling" which is bug 418521, then this bug is still valid, you still can see -moz-focus-inner inside the padding.

Navigate with the keyboard on the testcase and you will see it.

Bug 418521 is not completely fixed, more is described in bug 601122.

Comment 18

[Nochum Sossonko [:Natch]]

Then the other bug will deal with removing/polishing this. This bug is purely about the use of the non-standard -moz-focus-inner.

Comment 19

[Nochum Sossonko [:Natch]]

Marking as dupe of much older bug.