412281 - [GTK] Unfocused options list looks like focused ones

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Behnam Esfahbod [:zwnj]]

Attachment: Screenshot-Enter Bug: Core - Minefield.png

As the orange color (default focus color of ubuntu) grabs user's notice strongly, these colors shouldn't be used for "selected unfocused options" in a options list.

This screenshot shows the problem.  Which select list has the focus?  Anyone at all?

I'm gonna attach 2 other screenshots to propose two solutions.

Comment 1

[Behnam Esfahbod [:zwnj]]

Attachment: Screenshot-Screensaver Preferences.png

Better solution is use selected-unfocused color of GTK, which is gray in ubuntu's default theme.

Comment 2

[Behnam Esfahbod [:zwnj]]

Attachment: Screenshot-Enter Bug: Core - Minefield-2.png

And the other one, which can be used beside the first one is to highlight the select-list-box like the text-boxes.  This would make it similar to (compatible with) drop-down boxes too.

Comment 3

[Behnam Esfahbod [:zwnj]]

BTW, if you look carefully to 1st or 3rd screenshots, you'll notice that the select-list-boxes look so plain comparing to drop-down and text boxes.

Comment 4

[Behnam Esfahbod [:zwnj]]

Attachment: Screenshot-Enter Bug: Core - Minefield-1.png

And just for archive, this is the look of a focused text-box in my theme.

Comment 5

[Teune van Steeg]

Attachment: don't use highlight color for non focused selects

I'm using -moz-dialog as the background color for non focused selects, as that is used in trees and richlistboxes too.

The ifdef-ing is because of bug 371487, which is the same bug for MAC, but the patch there uses a mac specific color. Also bug 371487 comment #4 states that windows uses its own color, but he isn't sure it is wanted there.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Shouldn't this then be a system color instead of an ifdef?

Comment 7

[Teune van Steeg]

Maybe there is something i am missing here: is there actually a system color which handles this correctly on all three platforms?

Comment 8

[Boris Zbarsky [:bzbarsky]]

We can add new -moz-* system colors as needed...

Comment 9

[Teune van Steeg]

Attachment: use -moz-cellhighlight* for non focused selects

Turns out there is a system color for this after all. This is the correct color on Linux. I did not test this on Mac or Windows, but this color is used for non focused selected tree cells in /themes/ on Windows

Comment 10

[Teune van Steeg]

Attachment: use -moz-cellhighlight* for non focused selects

This, I think, uses cleaner CSS.
And it makes -moz-cellhighlight the same color as -moz-mac-secundaryhighlight on Mac, since that is the prefered color. I think this is save to do because -moz-cellhighlight is used almost nowhere currently.

-moz-cellhighlighttext is de same color as -moz-DialogText on Mac, and I left that this way, because -moz-DialogText is used wherever -moz-mac-secundaryhighlight is used.

On windows -moz-cellhighlight* is the same color as -moz-Dialog*, which is currently used on trees and lists. So using that color should be correct for Windows too.

Comment 11

[Reed Loden [:reed]]

Comment on attachment 297473 [details] [diff] [review]
use -moz-cellhighlight* for non focused selects

Fix display problem with option lists on Linux.

Comment 12

[Reed Loden [:reed]]

Checking in layout/style/forms.css;
/cvsroot/mozilla/layout/style/forms.css,v  <--  forms.css
new revision: 3.144; previous revision: 3.143
done
Checking in widget/src/cocoa/nsLookAndFeel.mm;
/cvsroot/mozilla/widget/src/cocoa/nsLookAndFeel.mm,v  <--  nsLookAndFeel.mm
new revision: 1.12; previous revision: 1.11
done

Comment 13

[Behnam Esfahbod [:zwnj]]

Thanks Teune, Reed.

And what about the border shadow/glow for focused list?

Comment 14

[Teune van Steeg]

(In reply to comment #13)
> And what about the border shadow/glow for focused list?
Since GTK doesn't draw focus glows for lists, and not all GTK themes draw that glow the same for text fields, I don't think it is worth it to try and get that implemented correctly for HTML selects. Although it would be nice to have. 

Comment 15

[Behnam Esfahbod [:zwnj]]

(In reply to comment #14)
> Since GTK doesn't draw focus glows for lists, and not all GTK themes draw that
> glow the same for text fields, I don't think it is worth it to try and get that
> implemented correctly for HTML selects. Although it would be nice to have. 

Yes. Probably it's because the scroll-bar is not inside the list box in GTK, and there's a narrow line between the list itself and the scrollbar.

Comment 16

[Behnam Esfahbod [:zwnj]]

Attachment: GTK multiline textbox

In this attachment you can see that multiline text-boxes in GTK doesn't have the gray/highlight inner glow too.

Well, what I see on Ubuntu Human theme is, select options list is so like multiline text-box. This way user feels this is a multiline text-box, which she is able to select on of the lines (or more).  This is reasonable, so I aks to add inner highlight glow to focused select options lists too.

Also you can see what I said about the scroll-bars and options-list/text-boxs too.

Comment 17

[Teune van Steeg]

(In reply to comment #16)
> Well, what I see on Ubuntu Human theme is, select options list is so like
> multiline text-box. This way user feels this is a multiline text-box, which she
> is able to select on of the lines (or more).  This is reasonable, so I aks to
> add inner highlight glow to focused select options lists too.
> 
We paint multiline text fields using single line text field widgets. This can actually been seen as a bug in Firefox. To get the inner glow in the options list, we'll have to draw a single line text field widget too for the options list, which is not what we are going to do.