520209 - active tab indication is too subtle / cannot see the tab focus outline (activity, contrast, invisible)

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[[:Aleksej]]

Fennec 20091001, desktop linux-i686.

I am using an old "Iiyama HM703UT A" CRT monitor. These have contrast issues, so you cannot see both very dark and very bright colours and have a good display configuration.

At my current setting (20-30% brightness, 40-50% contrast) I cannot see the black frame around the active tab thumbnail, or see it with a great difficulty.

Comment 2

[Madhava Enros [:madhava]]

Bringing my comment from the duped bug over here:

This selection border is not visible enough.  In the usability tests, it seemed
to be contributing to a slowness in understanding what the tab sidebar was
about in some users (i.e. people would tap, but not realize that their
currently selected tab was changing).

Comment 3

[Madhava Enros [:madhava]]

Attachment: some options, both going darker and using other colors from the UI

the ones with a light background require a background-grey keyline around the thumbnail

Comment 4

[Madhava Enros [:madhava]]

the two darker grays are:

darker:      1b1c20  (RGB: 27 28 32)
darker yet:  0c0d10  (RGB: 12 13 16)

the blue is the highlight blue from fennec (9cc6e4), and the light grey is the one we use for separator rows (efebef).

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch

Patch using the "darker yet" color, which I think Madhava was leaning towards.

Madhava - what say you?

Comment 6

[Madhava Enros [:madhava]]

Yes - let's see how well this works.  I like the idea of the blue, but I don't think it's quite right yet, whereas the "darker yet" gray does the job.  Darker gray it is.

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed:
https://hg.mozilla.org/mobile-browser/rev/507cc96fd0dd

Comment 8

[Aakash Desai [:aakashd]]

I don't see a difference and I think it's even harder to notice this with a mobile device with a glossy screen when under a light.

Comment 9

[Madhava Enros [:madhava]]

Tried some new variants of the blue outline, and I think we have an improvement.

These were the variants:
http://www.flickr.com/photos/madhava_work/4153261795/sizes/o/

After looking at them on device:
http://www.flickr.com/photos/madhava_work/4153205997/

The consensus seems to be that the 4:4 variant works the best.  That is - 4px of background gray and then 4px of highlight blue.  The outer border has rounded corners, as the current outline does, whereas the gray area inside has square corners.

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch

Uses border colors to create the 4:4 effect

Comment 11

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 415722 [details] [diff] [review]
patch

>diff --git a/themes/wince/browser.css b/themes/wince/browser.css

> box[type="documenttab"][selected="true"] .documenttab-canvas {

>+  border: 0.8mm solid;

>+  -moz-border-top-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;

I'm guessing this doesn't work very well if the border ends up being less than 8 pixels... Not sure whether that's likely, but perhaps we should use px here?

Comment 12

[Madhava Enros [:madhava]]

aren't we supposed to be using px for everything now?

Comment 13

[:Gavin Sharp [email: [e-mail]]]

We didn't make that switch for WinCE.

Comment 14

[Madhava Enros [:madhava]]

Also - screenshot please!

Comment 15

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #11)
> (From update of attachment 415722 [details] [diff] [review])
> >diff --git a/themes/wince/browser.css b/themes/wince/browser.css

> I'm guessing this doesn't work very well if the border ends up being less than
> 8 pixels... Not sure whether that's likely, but perhaps we should use px here?

Changed to 8px for checkin. That should be safe.

(In reply to comment #14)
> Also - screenshot please!

http://people.mozilla.com/~mfinkle/fennec/screenshots/fennec-tab-selection.png

Comment 16

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed:
https://hg.mozilla.org/mobile-browser/rev/9e4d9c448fbf

Comment 17

[Aakash Desai [:aakashd]]

looks great! verified FIXED on builds:

Mozilla/5.0 (Windows; U; Window3sCE 5.2; en-US; rv:1.9.2b5pre) Gecko/20091203 Namoroka/3.6b5pre Fennec/1.0a4pre

and

Mozilla/5.0 (X11; U; Linux armv7l; Nokia N900; en-US; rv:1.9.2b5pre) Gecko/20091203 Firefox/3.6b5pre Fennec/1.0b6pre

and

Mozilla/5.0 (X11; U; Linux armv6l; Nokia N8xx; en-US; rv:1.9.3a1pre) Gecko/20091203 Firefox/3.7a1pre Fennec/1.0b5