251614 - Squares appear in focus rings of submit button.

Status: VERIFIED FIXED

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Stephen Donner [:stephend] Not actively reading bugmail]

Build ID: Today's 7-15-2004 trunk, Seamonkey on Windows XP.

Summary: Squares appear in focus rings of submit button.

See testcase.

Comment 1

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Testcase

Comment 2

[Aaron Leventhal]

Confirming.

Comment 3

[Stephen Donner [:stephend] Not actively reading bugmail]

Aaron, whatever you backed out fixed this in build 2004-07-16-09 on Windows XP,
Seamonkey trunk.

Comment 4

[Stephen Donner [:stephend] Not actively reading bugmail]

But it's now back in 2004-07-17-07.

Comment 5

[Aaron Leventhal]

Weird.

Now that we draw outlines outside the frame, we can have a focus outline outside
of the image button as IE does.

However, without specifying border: 0px we get the very strange result of the
testcase. We got the squares (as if the outline width is 2 px) as well an
additional the 1px dotted outline even outside of that. It's as if border and
outline aren't cleanly separated in the code somewhere.

So, this change to forms.css fixes the problem but I don't know why the border
rule is necessary. Something's wrong.

 input[type="image"]:focus {
-  -moz-outline: 1px dotted -moz-FieldText;
+  -moz-outline: 1px dotted invert;
+  border: 0px;
 }

Comment 6

[Aaron Leventhal]

Attachment: Forcing no border for focused input[type="image"] cleans up the focus outline

Not really expecting r= here, but need feedback

Comment 7

[Robert O'Callahan (:roc) (email my personal email if necessary)]

This is a job for DOM INSPECTOR! Don't leave home without it!

DOMI shows this rule in quirk.css:

/* border when focused -- only change style to dotted */
input[type=image]:focus {
  border-style: dotted;
}

So that's what you get.

Ian checked that in. I'm not sure why. Perhaps he can advise us whether to
remove it.

Comment 8

[Hixie (not reading bugmail)]

Before we supported outlines, image buttons needed a way to show focus, and...

Anyway. The correct solution is to just remove the block you quoted. Don't also 
remove the border totally, since that should (as far as I can tell) remain, 
inside the focus outline.

Comment 9

[Aaron Leventhal]

But how did the border become 2 pixels wide? We never showed these square dots
before.

Comment 10

[Hixie (not reading bugmail)]

Yes we did...

Comment 11

[Aaron Leventhal]

Attachment: Previous focus appearance. Shows that our focus outline dots were 1x1 px

This is our old focus appearance. How did we go from that to the 2x2 px dotted
border? Where did the width of 2 come from?

Comment 12

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I think the default border width is 2px.

Aaron, try removing that rule as Hixie suggested, and if it works I'll give it
the thumbs-up.

Comment 13

[Aaron Leventhal]

Attachment: 1) gets rid of border-style line in quirks.css, 2) changes outline color to invert to be consistent with other outlines

Comment 14

[Hixie (not reading bugmail)]

> Where did the width of 2 come from?

Like roc said, the DOM Inspector will tell you...

Comment 15

[Aaron Leventhal]

Checking in forms.css;
/cvsroot/mozilla/layout/html/document/src/forms.css,v  <--  forms.css
new revision: 3.81; previous revision: 3.80
done
Checking in quirk.css;
/cvsroot/mozilla/layout/html/document/src/quirk.css,v  <--  quirk.css
new revision: 1.52; previous revision: 1.51
done

Comment 16

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED using the 2004-08-02-08 builds on my
http://bugzilla.mozilla.org/attachment.cgi?id=153325&action=view testcase with
Windows XP.

Comment 17

[[e-mail]]

In standards mode the usual inverted dotted outline applies. In quirks mode
we're supposed to default to a 2px solid border which changes to dotted when we
have the focus. When quirk.css really overrode forms.css the rules used to work.
However now forms.css overrides quirk.css you get all sorts of weirdness :-(