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: