xul listbox: Show dotted border around focused item

RESOLVED FIXED in mozilla1.2alpha


17 years ago
10 years ago


(Reporter: Jesse Ruderman, Assigned: Dean Tessman)


({access, sec508})

Windows 98
access, sec508

Firefox Tracking Flags

(Not tracked)



(3 attachments, 1 obsolete attachment)



17 years ago
On Windows: when a listbox has focus and one or more items are selected, the 
last-selected item should have a dotted border around it.  If no items are 
selected but the listbox isn't empty, the first visible item should have a 
dotted border around it (in Win98 native listboxes, it's the first item in the 
list that has the border, but I think that's a bug in the native widget set).  
If the listbox is empty, there should be a dotted border around the 
non-existent first item.

To get listboxes with stuff in them, go to 
http://bugzilla.mozilla.org/query.cgi or Prefs->Navigator->Helper Apps.

To get an empty listbox, go to data:text/html,<select size=5> or 
Prefs->Smart Browsing or Prefs->Navigator->Languages->Add.

(Btw, do I need to file one bug for webpages and another one for prefs in the 
Windows Classic theme?)

Comment 1

17 years ago
>If no items are selected but the listbox isn't empty, the first visible item 
>should have a dotted border around it...

but if you just ctrl-clicked the only selected item to get the listbox into 
that state, the item you just ctrl-clicked should have the focus border.

Comment 2

17 years ago
Hmm, and does Modern also need its own bug?  It gets some of these things right 
(it shows a green border around the focused item), but not others (it doesn't 
indicate focus at all for an empty listbox, altough fixing bug 64075 might be 
sufficient for fixing that).

Comment 3

17 years ago
Could this be summarized in a more general manner, like "indicate selected item 
in listbox with focus rectangle"?  Should this be skinnable?

Comment 4

17 years ago
> (Btw, do I need to file one bug for webpages and another one for prefs in the 
> Windows Classic theme?)

Yes. These are currently implemented with separate codebases, so a separate
bug for HTML Form Controls is required. (They may begin to share some 
implementation, but it would still be better to treat the two separately).

As far as XUL goes, I should note that the examples given above, are actually
<tree>s. However, the point is the same: the win32 tree will draw a dotted 
border around the last selected item in a multiple selection.

Comment 5

17 years ago
Making this bug track the problem for the Win Classic theme only.  I filed bug 
64165 for webpages viewed under Windows.  I haven't filed an extra bug for 
Modern because I expect most/all of its problems in this area to go away when 
this bug is fixed.
Summary: Windows: indicate focused listbox using dotted border → Win Classic: indicate focused listbox (or tree) using dotted border


17 years ago
Blocks: 18575

Comment 6

17 years ago
Dean: yes, it should be skinnable.  Modern uses a solid green border around the 
focused item within a tree (and maybe also within a listbox), and Classic 
should use a dotted border. 

I just noticed that in native Windows listboxes the color of the dotted border 
seems to change depending on whether the focused item is also selected.

Comment 7

17 years ago
Actually, I think the summary should be changed to "Double right-clicking on a 
page disables keyboard".  I duplicated the steps and not only could I not type 
in input fields, but keyboard shortcuts didn't work (eg. Ctrl+F) and I couldn't 
tab between fields.  If someone else can confirm this, we should change the 

Comment 8

17 years ago
Um, Dean. Correct comment, but wrong bug?

The 'double-right-click kills all' is a known bug -- bug 30841

Comment 9

17 years ago
add Dean to cc: this time -- Um, Dean. Correct comment, but wrong bug? The 
'double-right-click kills all' is a known bug -- bug 30841

Comment 10

17 years ago
Well, there's proof that I'm an idiot for ya.  Comments are now in the proper 
bug.  Sorry about the spam.

Comment 11

17 years ago
Classic theme, ->ben
Assignee: trudelle → ben

Comment 12

17 years ago
adding access keyword
Keywords: access


17 years ago
Severity: normal → minor
Keywords: classic, polish

Comment 13

17 years ago
Working on most doomed which happens to be Ben right now.

Comment 14

17 years ago
A focus ring needs to happen for listboxes and trees in all themes, not just win

Now we have this bug, 64065 and 89466.

Aren't they all the same bug?
Summary: Win Classic: indicate focused listbox (or tree) using dotted border → Indicate focused listbox (or tree) using dotted border

Comment 15

17 years ago
I filed bug 64165 as separate from this bug because Win Classic (this bug) and
form controls (64165) used different code paths.  See bug 57209 for making them
use the same code path.

Comment 16

17 years ago
*** Bug 96100 has been marked as a duplicate of this bug. ***

Comment 17

17 years ago
From bug 96100: this bug can cause users to think they can't focus a listbox.  
Raising severity to normal.

Adding fcc508 keyword, because always having a visual indication of focus is a 
requirement for software sold to the US government.
Severity: minor → normal
Keywords: fcc508

Comment 18

17 years ago
This issue can be solved with a simple CSS addition as below.

outliner:focus{border: 1px dotted #000000;}

tree:focus{border: 1px dotted #000000;}



Comment 19

17 years ago

Comment 20

17 years ago
Actually this doesn't seem right.  Won't this just put a dotted line around the
whole list box, and not just the selected item in the listbox?  Can we see some
screenshots of this first?  Thanks.

Comment 21

17 years ago
Also that rule won't affect HTML listboxes.

Comment 22

17 years ago
So maybe we also need:

select:focus{border: 1px dotted #000000;}

We've made this mod to our custom Mozilla build.  In an XUL application where 
keyboard navigation is a key part of the spec, the problem is as follows: tab 
from an button to a tree and there's no way to tell the tree has focus (unless 
an item is already selected when it turns from inactive selection to active 

Styling of the actual selected item is a whole other issue and not suitable for 
this bug, given that the title iis "focused box" not "focused row".

There's a separate bug for html: 64165

Comment 23

16 years ago
*** Bug 102432 has been marked as a duplicate of this bug. ***

Comment 24

16 years ago
Created attachment 51528 [details]
Screen shot of tree with and without focus feedback.
sr=shaver on Andy's suggested addition.

Comment 26

16 years ago
In light of the progress made with disabling window.new and onLoad and such, is
this much of an issue anymore? Randomly looking at old bugs marked new,
Istumbled across this one.

Comment 27

16 years ago
Created attachment 51827 [details] [diff] [review]
Andy Req'ed help making the diff in #mozillazine, so here it is, as per his comment there.

Comment 28

16 years ago
Ah crap, ignore my comment right above my patch. Soemhow I managed to type that
into this bug when it should go on a bug in the mid 40,000 range. Sorry for the

Comment 29

16 years ago
Created attachment 51889 [details] [diff] [review]
updated patch as per andy on 10/03/2001

Comment 30

16 years ago
What about listboxes, as mentioned in the original report?  They need a focus
rectangle around the last-selected item.

Comment 31

16 years ago
My take on the bug title was that the listbox referred to the upcoming change 
in tagnames from trees to listboxes.  The patch attached extends the bug to 
outlines, but not to HTML elements -- which have the same problem.

The name of the tag in HTML is Select, and it does have the same problem. I 
suggest we resolve the HTML issue at http://bugzilla.mozilla.org/show_bug.cgi?
id=64165 and let this bug be closed for XUL with the attached patch.

Comment 32

16 years ago
Ah, I see.  That works for me.  Adding "[XUL]" to the summary.
Summary: Indicate focused listbox (or tree) using dotted border → [XUL] Indicate focused listbox (or tree) using dotted border

Comment 33

16 years ago
adding patch keyword as per suggestion in #mozillazine by someone or other that
knows what's going on...
Keywords: patch


16 years ago
Keywords: review


16 years ago
Attachment #51827 - Attachment is obsolete: true
Erk. I can see why you'd want this because of the nothing-selected, or nothing-
selected-is-in-visible-region argument.. but the dotted border looks odd, and 
is not consistent with existing Windows UI. I'd take this in a pinch, but does 
anyone have any more visually pleasing alternatives? 

Resummarizing to reflect this. 
Priority: -- → P3
Summary: [XUL] Indicate focused listbox (or tree) using dotted border → [XUL] Visual indication that tree/listbox is focused
Target Milestone: --- → mozilla1.2

Comment 35

16 years ago
I've been thinking (which in and of itself is dangerous) and since this is
targeted at Windows, the standard mechanism for Windows is to make it a solid
line around the active frame/pane, as opposed to dotted. How about I just make
it solid instead of dotted? Then it's a visual cue, and it's as consistent with
Windows as is possible...

Comment 36

16 years ago
Windows doesn't make any physical change to the border of a list box, edit box, 
combo box, etc., when it gets focus.  It changes a button to have a dark border 
if that button becomes the default button (activated with Enter) when focused.  
Otherwise, all visual indication is done with focus rectangles.  I'd rather see 
bug 64165 resolved over this one, which now that I actually think about it is a 
lot more standard from the Windows side of things at least.

Comment 37

16 years ago
You may prefer to see that bug resolved more than this one, but since there's a
patch ready to go, there's not a lot of reason to stop this one from being closed.

Comment 38

16 years ago
Except that it's not the right thing to do on Windows...

Comment 39

16 years ago
At least that's a valid reason. I'll what I can do.

Comment 40

16 years ago
This bug appears to have gone slightly off the rails since 2001-09-06 (despite
an attempt from kerz to bring it back on track). It is not about showing any
sort of border around an entire focused listbox (or tree, or outliner, or
whatever); native Windows listboxes (unlike those in Mac OS) do not do this, and
any accessibility benefit from doing so would be considerably less than the
annoyance caused by the inconsistency with native UI.

What Windows does do, as described in the original bug report, is put a dotted
border around the focused *item* in a focused listbox -- whether or not that
item is selected. Resummarizing, as the current summary is accurate but
apparently not precise enough.
Assignee: ben → hewitt
Component: XP Toolkit/Widgets → Themes
QA Contact: jrgm → pmac
Summary: [XUL] Visual indication that tree/listbox is focused → Dotted border around focused item in listboxes/trees/outliners

Comment 41

16 years ago
-> shliang
Assignee: hewitt → shliang

Comment 42

16 years ago
Ctrl+up/down in a listbox will move focus within the listbox without modifying 
the selection (bug 40983 comment 17).  Without any visual indication of which 
item within the listbox has focus, ctrl+up doesn't seem to do anything.
Summary: Dotted border around focused item in listboxes/trees/outliners → Show dotted border around focused item in listboxes/trees/outliners

Comment 43

16 years ago
There are already dotted borders around selected items in focused 
listboxes/outliners/trees. There shouldn't be a border around the whole thing. 
So what is this bug really about?

Comment 44

16 years ago
This is about html listboxes now, I presume. -> bryner
Assignee: shliang → bryner
Summary: Show dotted border around focused item in listboxes/trees/outliners → Show dotted border around focused item in html listboxes

Comment 45

16 years ago
Will this be fixes as part of XBL-based HTML form conrol work?
At present, I am not drawing a border, but you can tell whether the listbox has
focus because the selection color is different for focused vs. non-focus
listboxes (as with trees).  Is that ok, or do we need a border as well?

Comment 47

16 years ago
You still need the border for showing which item is active when moving through
multi-select lists with Ctrl+Arrows, for example.
Oh, sorry, I read this as showing a dotted border around the listbox itself.

Yes, that will happen automatically with XBL select widgets.

Comment 49

16 years ago
Unmorphing, bug 64165 is for html listboxes.  We might also need a new bug for
xul trees.
Keywords: classic, patch, polish, review
Summary: Show dotted border around focused item in html listboxes → xul listbox: Show dotted border around focused item

Comment 50

16 years ago
->andreww, this should just be a style rule for drawing the dotted border
Assignee: bryner → andreww

Comment 51

16 years ago
Created attachment 89016 [details] [diff] [review]

This adds a rectangle around the selected item in a listbox.  I did this for
Modern, and for Classic only on Windows.  For Classic I implemented something
based on Jesse's comment 6, being that the dotted border is a different color
depending on whether the item's selected or not.

In case you're stuck for something to test this on, I used the listbox in Prefs
> Navigator > Languages, and the tree in the bookmarks sidebar panel.  This
allowed me to test Ctrl+clicking to select/deselect the current item, and to
lose focus and make sure the current item indicator rectangle did not remain.

Comment 52

16 years ago
Comments anyone?


16 years ago

Comment 53

16 years ago
Dean, I'll test your patch today.

Comment 54

16 years ago
this patch seems to work ok for me.  Any other comments before I  look for 

Comment 55

16 years ago
Andrew, you don't have to look for a review, you can r= it yourself.

Comment 56

16 years ago
Yeah, I know. I've been editing too many bugs lately...I was thinking about 
another bug that I had just changed where I took someone's patch and 
updated it...


Comment 57

16 years ago
If you're fine with the patch, can I take the bug back?

Comment 58

16 years ago
sure... r=andreww

Comment 59

16 years ago
Back to me.

Jag or Blake, can you sr=?
Assignee: andreww → dean_tessman

Comment 60

16 years ago
Comment on attachment 89016 [details] [diff] [review]

Marking Andrew's review.
Attachment #89016 - Flags: review+

Comment 61

16 years ago
We shouldn't be changing #F5DB95 to #000000 in the classic theme.  This color
designed to imitate the inverse of the default selection color on windows, which
is the color windows calculates for this purpose.  Making it black wouldn't be

Comment 62

16 years ago
I didn't change it from #F5DB95 to #000000 I changed it to #C0C0C0, which is
light grey / silver.

-listbox:focus > listitem[selected="true"][current="true"] {
-  border: 1px dotted #F5DB95;

+listbox:focus > listitem[current="true"][selected="true"] {
+  border: 1px dotted #C0C0C0;

The #000000 is only when it's not selected.

+listbox:focus > listitem[current="true"] {
+  border: 1px dotted #000000;

I found that the dotted grey border was not very visible when selected="false",
so I changed it to use two different colors depending on selection state.  Try
it, you'll see that this way it's clear regardless of whether the item is selected.

Comment 63

16 years ago
Be sure to test the colors on all three platforms in case there is some os - 
specific issues.

Comment 64

16 years ago
Oh, yeah.  I only have windows.  Can someone test this on Linux?  Do we even
show focus feedback on Mac?

Comment 65

16 years ago
Whoops, I spoke too soon.  The changes to the classic theme are windows-only. 
The change to modern has nothing to do with colors, it's only

-listbox:focus > listitem[selected="true"][current="true"] {
+listbox:focus > listitem[current="true"] {

Comment 66

16 years ago
Joe, do you have any comments based on my comment 62, which was in response to
your comment 61?  I'd like to see this cosmetic fix land before the next
milestone, just to get it off my plate.

Comment 67

16 years ago
Comment on attachment 89016 [details] [diff] [review]

Attachment #89016 - Flags: superreview+

Comment 68

15 years ago
checked in
Last Resolved: 15 years ago
Resolution: --- → FIXED

Comment 69

15 years ago
See also bug 154034, "When tabbing to listbox or tree, sometimes nothing appears
focused until you arrow down".
Product: Core → SeaMonkey
You need to log in before you can comment on or make changes to this bug.