Squares appear in focus rings of submit button.

VERIFIED FIXED

Status

()

--
major
VERIFIED FIXED
15 years ago
14 years ago

People

(Reporter: stephend, Assigned: aaronlev)

Tracking

(Blocks: 1 bug)

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

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

Summary: Squares appear in focus rings of submit button.

See testcase.
(Reporter)

Comment 1

15 years ago
Created attachment 153325 [details]
Testcase
(Assignee)

Comment 2

15 years ago
Confirming.
(Reporter)

Comment 3

15 years ago
Aaron, whatever you backed out fixed this in build 2004-07-16-09 on Windows XP,
Seamonkey trunk.
(Reporter)

Comment 4

15 years ago
But it's now back in 2004-07-17-07.
(Assignee)

Comment 5

14 years ago
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;
 }
(Assignee)

Comment 6

14 years ago
Created attachment 154674 [details] [diff] [review]
Forcing no border for focused input[type="image"] cleans up the focus outline

Not really expecting r= here, but need feedback
(Assignee)

Updated

14 years ago
Attachment #154674 - Flags: superreview?(dbaron)
Attachment #154674 - Flags: review?(roc)
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.
Attachment #154674 - Flags: superreview?(dbaron)
Attachment #154674 - Flags: superreview-
Attachment #154674 - Flags: review?(roc)
Attachment #154674 - Flags: review-
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.
(Assignee)

Comment 9

14 years ago
But how did the border become 2 pixels wide? We never showed these square dots
before.
Yes we did...
(Assignee)

Comment 11

14 years ago
Created attachment 154984 [details]
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?
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.
(Assignee)

Comment 13

14 years ago
Created attachment 154985 [details] [diff] [review]
1) gets rid of border-style line in quirks.css, 2) changes outline color to invert to be consistent with other outlines
(Assignee)

Updated

14 years ago
Attachment #154674 - Attachment is obsolete: true
> Where did the width of 2 come from?

Like roc said, the DOM Inspector will tell you...
(Assignee)

Updated

14 years ago
Attachment #154985 - Flags: superreview?(roc)
Attachment #154985 - Flags: superreview?(roc)
Attachment #154985 - Flags: superreview+
Attachment #154985 - Flags: review+
(Assignee)

Comment 15

14 years ago
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
Status: NEW → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → FIXED
(Reporter)

Comment 16

14 years ago
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.
Status: RESOLVED → VERIFIED

Comment 17

14 years ago
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 :-(
You need to log in before you can comment on or make changes to this bug.