Closed
Bug 50804
Opened 24 years ago
Closed 24 years ago
Focus outlines should look like Mac focus outlines on Mac OS [outline]
Categories
(Core :: Layout, defect, P1)
Core
Layout
Tracking
()
VERIFIED
FIXED
People
(Reporter: hsivonen, Assigned: ian)
References
Details
(Whiteboard: [have fix])
Attachments
(2 files)
(deleted),
image/png
|
Details | |
(deleted),
patch
|
Details | Diff | Splinter Review |
Build ID: 2000082908
Mac-specific, different expectations apply on other platforms
Steps to reproduce:
1) Click on a link
Actual results:
A focus outline is displayed around the link. It is 1px dotted black. It looks like being from
the monochrome era.
Expected results:
Expected the focus outline to be 2px solid with the proper Appearance color and the
corner pixels rounded off. (The default color is #6666CC.)
Additional information:
The relevant style rules can be found by searching for "focus" in html.css. I'll post to
n.p.m.style to find out whether Mozilla has a suitable outline style. I wasn't able to get the
right corner effect. This also applies to form widgets that are being redesigned.
Reporter | ||
Comment 1•24 years ago
|
||
Reporter | ||
Comment 2•24 years ago
|
||
Reporter | ||
Comment 3•24 years ago
|
||
There are three problems with the patch:
* The corners aren't right. According to Attinasi, Mozilla can't do rounded corners, yet.
* The color is hard-coded. It isn't inherited from Appearance
* This is a Mac-specific thing, so the focus rules probably shouldn't be in html.css. They
probably should be in an @imported platform-specific file.
Comment 4•24 years ago
|
||
,
Assignee: hangas → clayton
Component: User Interface: Design Feedback → HTML Element
Keywords: pp
QA Contact: mpt → petersen
Reporter | ||
Comment 5•24 years ago
|
||
4xp -- Another Browser get the focus outlines right (issues with the color though :-)
Keywords: 4xp
Comment 6•24 years ago
|
||
Good work, Henri. But I would still expect the border to be dotted, rather than
solid. A solid border makes sense for text fields, which already have an inner
border of 1px solid black. But controls other than text fields don't normally
have keyboard focus in Mac OS, and neither do links (not even in the Help
Viewer).
So for Mozilla, we have to imagine what such focus would look like if it was
implemented in Mac OS; and I think it would be dotted, rather than solid. It
would make sense to apply the same focus indication to links as we will
eventually apply to radio buttons; and I think a dotted border would leave the
text more readable in that case.
Three other questions about the patch:
(1) Who is Iso Kassi?
(2) Could you extend the selector to apply the style to HTML radio buttons and
checkboxes (including their labels), while you are at it?
(3) What are we going to do if the background of the link also happens to be
lavender? (Come to think of it, what should the black border on Windows do,
if the background happens to be black?)
Reporter | ||
Comment 7•24 years ago
|
||
>So for Mozilla, we have to imagine what such focus would look like if it was
>implemented in Mac OS; and I think it would be dotted, rather than solid.
1) Dotted lines are not Mac-like any more. They were remains from the
monocrome era and are currently replaced with solid color lines or
translucency effects.
2) I expect links to be part of the same focus traversal loops as the form
elements. I expect the focus to be similarly represented throughout the
loop.
3) Dotted lines look bleak compared to IE's focus outlines
>It would make sense to apply the same focus indication to links as we will
>eventually apply to radio buttons; and I think a dotted border would leave
>the text more readable in that case.
The text could be perfectly readable within a solid outline if we had something like
-moz-outlinepadding: 1px; so that the outline wouldn't touch the text.
>Three other questions about the patch:
The patch is embarassingly inadequate, but the outline support is limited.
>(1) Who is Iso Kassi?
It's one on my disks. 'Iso Kassi' Finnish for 'Big Bag'. The disk is so named because of
the very remote similarity between the words 'kassi' and 'cache'. It once was relatively
big in terms of megabytes. It still is in terms of hardware size.
>(2) Could you extend the selector to apply the style to HTML radio buttons and
> checkboxes (including their labels), while you are at it?
I tried. The outlines had an effect only on checkboxes and radiobuttons and in those
cases the color was drawn inside the widgets.
Comment 8•24 years ago
|
||
> Dotted lines are not Mac-like any more. They were remains from the monocrome
> era
No, dotted lines have *never* been used by Mac OS, AFAIK. (I'm running in 256
grays right now, and native focus outlines for text widgets are still 2px solid.)
But then, focus has never been indicated on radio buttons, checkboxes, etc
before; so when it comes to deciding what is Mac-like for non-text controls, we
have only our imagination as a guide.
Reporter | ||
Comment 9•24 years ago
|
||
I meant dotted lines in Mac OS in general, not as focus indicators in particular.
Assignee | ||
Updated•24 years ago
|
Summary: Focus outlines should look like Mac focus outlines on Mac OS → Focus outlines should look like Mac focus outlines on Mac OS [outline]
Comment 10•24 years ago
|
||
Hokay, nominating for nsbeta3 (worth a try, I guess).
Comment 11•24 years ago
|
||
attempting to triage Clayton's bugs...
I think this may be Pierre's
Assignee: clayton → pierre
Comment 13•24 years ago
|
||
This is not Mac specific: it looks better on all platforms.
Fix check in html.css for Henri Sivonen.
Status: NEW → RESOLVED
Closed: 24 years ago
Resolution: --- → FIXED
Comment 14•24 years ago
|
||
> This is not Mac specific: it looks better on all platforms.
I beg to differ; the new look is absolutely horrible.
When I first saw this change, I thought it was a bug, not a bug fix!
It looks like something hacked in to make sure the style was being
applied properly.
The 1px dotted black outline had the significant virtue that it is
extremely unobtrusive; additionally, it does not clash with the page's
existing colour scheme. Widgets should have a focus style consistent
with the rest of the UI; the links should blend in with the page as
much as possible.
Please either revert this change or provide an option along the lines
of:
(o) Links inherit focus style from skin
( ) Links use dotted-line focus style
or whatever is deemed appropriate.
Reporter | ||
Comment 15•24 years ago
|
||
Reopening. The fix is far from complete.
I still don't think a dotted line should be used on the Mac. Dotted lines were
once used in the UI on the Mac (in general, not as focus outlines). Apple has
gradually removed them. Dotted lines also look bad on high-resolution
non-Trinitron screens. If the UI accent color is considered too obtrusive, using
a solid highlight color based on the background would, in my opinion, be a
better solution than the dotted line.
You may still want to use the dotted line on Windows to match platform focus
conventions.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Comment 16•24 years ago
|
||
Mac version of 4.X did not provide for keyboard acess to radiobuttons and such
but I think that this needs to be fixed for accessability reasons. You are right
that the focus visual style should not be different depending on which item has
focus so links and form controls should have the same look. This is primarily
because having two sytles for this decreases recognition.
For preview release 3 I am happy that they got this working at all I was not too
optomistic. :-)
Mac like or not these things need to be considered.
Both of these should be skin defined eventully. In the interum I would agree
that it should not clash with the page and be consistent with the skin. These
may not be compatible issues so I would prefer that the "Not clashing with the
page" take precidence for the reason that this is primarily where this kind of
focus would "live". Unlike focus rings for dialogs where you are prety sure of
the back ground and such, web pages can have any color texture or graphic as a
back ground. Having this visable with out causing nausia in the majority of
users is a desirable trate that should be considered.
Being unobtrusive is not necessarily a desirable thing as people dependent on
this currently have problems finding it. This is a known thing. The one pixel
dotted line then has it's advantages and disadvantages. It is non clashing but
not in your face but it is also not very noticable and may not be mac like.
The solid outline based on the back ground may not be a bad alternative for both
Mac and PC. Except if the codeder does the reverse video thing. Vomitacious as
my little sister used to say. ;-)
Comment 17•24 years ago
|
||
Umm.
Based on what was the judgement made that 'it looks better on all platforms.' ?
I happen to think it works a lot worse, and it looks nothing like any focus
designation *I've* ever seen on win32. Also, being so thick it often covers
some of the link's text. Methinks making it XP was just the easier fix...
Please back it out, on Windows at least.
Comment 18•24 years ago
|
||
Furthermore, image links still use the dotted focus rects, making image links
and text links inconsistent in focus style, which should not be the case. And
no, you can't just add the same style to links, because that would give even
images with border=0 a border, something which also should not be the case.
Assignee | ||
Comment 19•24 years ago
|
||
Taking this. I have a "better looking" version in my html.css that uses dotted
outlines but coloured the same as the link, which *generally* looks better.
It is getting a bit late for these kinds of cosmetic changes; since we don't
have a per-platform html.css I think we should go with the least-impact fix.
If there are any last-minute votes for the 2px solid line, speak now. The
advantages of using a 1px dotted line that is the same colour as the text is
that the text colour presumably looks ok on the background, since it was
picked. And 1px dotted is not as "in your face" as a 2px solid line.
Reporter | ||
Comment 20•24 years ago
|
||
I am not in favor of using a 2px solid line as is. I am not in favor of dotted lines on Mac OS
as a permanent solution, either (reasons stated above), but I think Ian's solution is the
most acceptable interim solution available.
For the purpose of the version of Mozilla running on Mac OS Classic, I am in favor of the
style visualized in the first attachment. It can't be achieved with Mozilla right now, which is
why this bug should stay open (even if the feature doesn't make it to Netscape 6).
However, using the link color might be a good idea. If the designers consider the outlines
too obtrusive, they might turn them off. (I've seen an author ask how to turn them off in IE
5 for Mac.)
On Windows it makes sense to use dotted lines for the sake of consistency. However,
they still look bad on a great number of screens.
Assignee | ||
Comment 21•24 years ago
|
||
*** Bug 52919 has been marked as a duplicate of this bug. ***
Comment 22•24 years ago
|
||
*** Bug 53308 has been marked as a duplicate of this bug. ***
Assignee | ||
Comment 23•24 years ago
|
||
Ok, the change was backed out. Since this bug has got so muddled, I am marking
it as FIXED -- if required, please open a new bug and clearly state what the
problem is, with graphical mock-ups showing the wanted behaviour, a nice clear
spec of how it should look _and feel_ in each state, and so on.
Status: NEW → RESOLVED
Closed: 24 years ago → 24 years ago
Resolution: --- → FIXED
Comment 24•24 years ago
|
||
I have to agree that Heads or Tails are hard to be made out here:).
I also saw some of the ideas he had for solutions. Marking VERIFIED in hopes
that other bugs will get appropriately filed.
Comment 25•24 years ago
|
||
*shrug*
Filed bug 53927, `Focus outlines should look like Mac focus outlines on Mac OS'.
SPAM. HTML Element component deprecated, changing component to Layout. See bug
88132 for details.
Component: HTML Element → Layout
You need to log in
before you can comment on or make changes to this bug.
Description
•