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)

defect

Tracking

()

VERIFIED FIXED

People

(Reporter: hsivonen, Assigned: ian)

References

Details

(Whiteboard: [have fix])

Attachments

(2 files)

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.
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.
,
Assignee: hangas → clayton
Component: User Interface: Design Feedback → HTML Element
Keywords: pp
QA Contact: mpt → petersen
4xp -- Another Browser get the focus outlines right (issues with the color though :-)
Keywords: 4xp
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?)
>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.
> 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.
I meant dotted lines in Mac OS in general, not as focus indicators in particular.
Summary: Focus outlines should look like Mac focus outlines on Mac OS → Focus outlines should look like Mac focus outlines on Mac OS [outline]
Hokay, nominating for nsbeta3 (worth a try, I guess).
Keywords: nsbeta3, patch
attempting to triage Clayton's bugs...

I think this may be Pierre's
Assignee: clayton → pierre
massive update for QA contact.
QA Contact: petersen → lorca
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
> 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.

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 → ---
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.  ;-)
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.  
Keywords: pp
OS: Mac System 8.5 → All
Hardware: Macintosh → All
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.
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.
Assignee: pierre → py8ieh=bugzilla
Status: REOPENED → NEW
Depends on: 3935
Keywords: patch
Priority: P3 → P1
Whiteboard: [have fix]
No longer depends on: 3935
Blocks: 6625
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.
*** Bug 52919 has been marked as a duplicate of this bug. ***
*** Bug 53308 has been marked as a duplicate of this bug. ***
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 ago24 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
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.
*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.

Attachment

General

Created:
Updated:
Size: