580194 - Tabbrowser icons or buttons are hard to see on mildly dark backgrounds (personas, glass, third-party OS themes)

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[rob64rock]

User-Agent:       Mozilla/5.0 (Windows; Windows NT 5.1; rv:2.0b2pre) Gecko/20100719 Minefield/4.0b2pre Firefox/3.6.6
Build Identifier: Mozilla/5.0 (Windows; Windows NT 5.1; rv:2.0b2pre) Gecko/20100719 Minefield/4.0b2pre Firefox/3.6.6

Minefield 4.0b2pre Nightly Trunk 20100719 is set to "browser.tabs.closeButtons" to "3" but after the new Close Tab button mockups took effect the Close Tab button on Tab bar is no longer red until you click it so you can't see it on some Persona Themes.

Persona's Examples:Black and Blue, Blue Swirl Fox, Matrix Fox, Metallica custom Persona

Reproducible: Always

Steps to Reproduce:
1.set "browser.tabs.closeButtons" to "3" in about:config
2.Download/install one of these Persona Themes: Black and Blue, Blue Swirl Fox, Matrix Fox, Metallica custom Persona
3.Pick one and enable it.
Actual Results:  
Since the new Close Tab button mockups took effect the Close Tab button on Tab bar is no longer red until you click it so you can't see it on some Persona Themes.

Expected Results:  
Should be able to see the Close Tab button on Tab bar before clicking it when using any Persona Theme.

The URL that demonstrates the problem that I'm seeing shows Minefield 4.0b2pre 20100719 using Persona Theme - Blue Swirl Fox.

Suggestion: When the Close Tab button is placed on Tab bar, change button text (x)color from charcoal gray and make the (x) red.

Comment 2

[Mike Beltzner [:beltzner, not reading bugmail]]

Closebutton all the way to the right is a non-supported user option; I'd approve a patch, but not block on this for the release. If we can't fix it, we may wish to remove the about:config option, instead.

Comment 3

[Dão Gottwald [:dao]]

This affects all icons in the tab bar.

Comment 4

[Christian Gerefalk]

No it works fine with the default list tabs button, especially with browser.allTabs.previews;true on.

Case in point: http://dl.dropbox.com/u/2991216/Pictures/tabcandyicon.png

Comment 5

[Christian Gerefalk]

Also the icon is getting re-sized in the bars, the visible area in the "Customize toolbar" window of the icon is 14x14 pixels, it's 12x12 in the navigation toolbars, 12x13 in the tab bar.

Measure for yourself: http://dl.dropbox.com/u/2991216/Pictures/tabcandyicon2.png (quick composite)

That scaling is the reason it's blurry looking

Comment 6

[Stephen Horlander [:shorlander]]

(In reply to comment #5)
> Also the icon is getting re-sized in the bars, the visible area in the
> "Customize toolbar" window of the icon is 14x14 pixels, it's 12x12 in the
> navigation toolbars, 12x13 in the tab bar.
> 
> Measure for yourself:
> http://dl.dropbox.com/u/2991216/Pictures/tabcandyicon2.png (quick composite)
> 
> That scaling is the reason it's blurry looking

The issue with the tabcanady icon should probably be a different bug. From your screenshot it looks like tabcandy is using the Mac icon on Windows.

Comment 8

[Mike Beltzner [:beltzner, not reading bugmail]]

Dao: next time, please renominate! Based on your comment, yes, this blocks :)

Comment 9

[rob64rock]

This userstyle help solve this bug for me and may give you some ideas for a solution. http://userstyles.org/styles/39303

Comment 10

[Alex Limi (:limi) — Firefox UX Team]

Damn form autocomplete.

Comment 11

[Bill Gianopoulos [:WG9s]]

I think the best way to fix this is to create icons that have a contrasting color outline, so that either the main body or the outline will always be visible.

Comment 12

[(no longer active)]

Is there a good reason that this blocks betaN?  If not, it should be moved over to final+.

Comment 13

[Stephen Horlander [:shorlander]]

Attachment: Icons on Variable Backgrounds - 01

My thoughts on fixing this are to use a white icon with a translucent black outline anywhere we have a variable background. Much like the Windows 7 system tray icons http://grab.by/9foE

Situations where we would do this include:

- Icons directly on Glass (icons on tab-strip, toolbar in tabs-on-bottom mode, etc)
- When using any persona

We could also use the same icons in high contrast situations.

Comment 14

[Mike Beltzner [:beltzner, not reading bugmail]]

** PRODUCT DRIVERS PLEASE NOTE **

This bug is one of 7 automatically changed from blocking2.0:betaN+ to blocking2.0:.x during the endgame of Firefox 4 for the following reasons:

 - it was marked as a soft blocking issue for a beta
 - the whiteboard indicated that it might be appropriate for a .x release

Comment 15

[Siddhartha Dugar [:sdrocking]]

Would love to see some activity on this bug.

Comment 16

[Tan Wei Lin Jason [:Ryuji]]

I have a idea. When the mouse is over the Tabbrowser icons or buttons, it will glow in light. this will allow them to be more visible should you want to press those Tabbrowser icons or buttons.

Comment 17

[Ken]

(In reply to comment #16)
> I have a idea. When the mouse is over the Tabbrowser icons or buttons, it
> will glow in light. this will allow them to be more visible should you want
> to press those Tabbrowser icons or buttons.

I have been using code that does something like this for a while, and it makes  icons (including Add-on icons) easier to see with many dark to light themes (most I have tried).
Both, Hovered over (and not([hover])) icons are easier to see.

All the code does is increase/tweak the gradient (-moz-linear-gradient) code found in Firefox's existing "browser.css" file.

See https://bugzilla.mozilla.org/show_bug.cgi?id=637255#c7 for the current code I have in my "userChrome.css".

Comment 18

[Frank Yan (:fryn)]

All of this bug's dependencies are fixed.
Can we close this?

Comment 19

[Dão Gottwald [:dao]]

(In reply to comment #18)
> All of this bug's dependencies are fixed.
> Can we close this?

No, see bug 671553 comment 5.

Comment 20

[Siddhartha Dugar [:sdrocking]]

(In reply to comment #19)
> No, see bug 671553 comment 5.
Bug 626221 is already a dependency of this bug and is on that issue.

Comment 21

[Steffen Wilberg]

Stephen, could you add the New Tab, Panorama, and List All Tabs icsons to Toolbar-inverted.png, please? Your attachment 516268 [details] already shows them...

Comment 22

[Stephen Horlander [:shorlander]]

(In reply to comment #21)
> Stephen, could you add the New Tab, Panorama, and List All Tabs icsons to
> Toolbar-inverted.png, please? Your attachment 516268 [details] already shows
> them...

Yes that is part of fixing this bug. But they don't currently belong in Toolbar-inverted.png since it is a direct mirror of Toolbar.png.

Comment 23

[Siddhartha Dugar [:sdrocking]]

Can handle it in bug 626221

Comment 24

[Paul [pwd]]

Don't forget we need the left and right arrow for the tab bar too.

Comment 25

[rob64rock]

Also need inverted icons for dark third-party OS themes, bug 671533 only covered dark personas and glass.

View topic: http://forums.mozillazine.org/viewtopic.php?f=23&t=2264417

Temp solution: http://userstyles.org/styles/51603/nightly-white-icons

Comment 26

[rob64rock]

Typo in the last post: not bug 671533, meant bug 671553

Comment 27

[Stephen Horlander [:shorlander]]

Attachment: Inverted Dropdown

I don't have a patch for this yet but I am dropping the images here in case someone else wanted to pick this up.

Comment 28

[Stephen Horlander [:shorlander]]

Attachment: Inverted New Tab

Comment 29

[Stephen Horlander [:shorlander]]

Attachment: Inverted Tab Arrow

Comment 30

[Stephen Horlander [:shorlander]]

Attachment: Inverted Panorama

Comment 31

[Dão Gottwald [:dao]]

I can pick it up from here.

Comment 32

[Dão Gottwald [:dao]]

Attachment: just the images

Comment 33

[Dão Gottwald [:dao]]

Attachment: use the new images

Comment 34

[Peter Henkel [:Terepin]]

(In reply to comment #27)
> Created attachment 550606 [details]
> Inverted Dropdown
> 
> I don't have a patch for this yet but I am dropping the images here in case
> someone else wanted to pick this up.

So we won't have dropdown arrows introduced in mockups?

Comment 35

[Dão Gottwald [:dao]]

Attachment: use the new images

Comment 36

[Stephen Horlander [:shorlander]]

(In reply to comment #31)
> I can pick it up from here.

thank you!



(In reply to comment #34)
> (In reply to comment #27)
> > Created attachment 550606 [details]
> > Inverted Dropdown
> > 
> > I don't have a patch for this yet but I am dropping the images here in case
> > someone else wanted to pick this up.
> 
> So we won't have dropdown arrows introduced in mockups?

I don't understand the question. Which dropdown arrows?

Comment 37

[Peter Henkel [:Terepin]]

This one: http://userstyles.org/styles/44128/fx4-dropmarkers-like-mockups

Comment 38

[Stephen Horlander [:shorlander]]

(In reply to comment #37)
> This one: http://userstyles.org/styles/44128/fx4-dropmarkers-like-mockups

That's bug 609107.

Comment 39

[Peter Henkel [:Terepin]]

Thank you.

Comment 40

[Dão Gottwald [:dao]]

Attachment: use the new images

Comment 41

[Stephen Horlander [:shorlander]]

Comment on attachment 550771 [details] [diff] [review]
use the new images

Review of attachment 550771 [details] [diff] [review]:
-----------------------------------------------------------------

> +%ifdef WINSTRIPE_AERO
> +#TabsToolbar > #tabview-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme),
> +#TabsToolbar > toolbarpaletteitem > #tabview-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme)
> +%endif

Missing a comma here.

The right tab scroll arrow appears blurry. Probably something to do with flipping it with scaleX(-1) but it isn't immediately obvious to me why it is creating that effect. I will attach a screenshot.

Looks good otherwise.

Comment 42

[Stephen Horlander [:shorlander]]

Attachment: Blurry Scroll Arrow

Comment 43

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander from comment #41)
> The right tab scroll arrow appears blurry. Probably something to do with
> flipping it with scaleX(-1) but it isn't immediately obvious to me why it is
> creating that effect.

Yep, pretty sure scaleX(-1) is buggy. Shouldn't be a result of this patch, though.

Comment 44

[Dão Gottwald [:dao]]

Attachment: use the new images

missing comma added

Comment 45

[bogas04]

https://bug671553.bugzilla.mozilla.org/attachment.cgi?id=552949

Comment 46

[Peter Henkel [:Terepin]]

Why are you showing us something that we already know about for a long time?

Comment 47

[bogas04]

Apologies my bad.

Comment 48

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

http://hg.mozilla.org/mozilla-central/rev/2c01344b6929

Comment 49

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

And

http://hg.mozilla.org/mozilla-central/rev/675e826e2938

as well

Comment 50

[rob64rock]

In my first OP above in the screenshots that I provided regarding this issue I figured that the tab close button on tab bar when using about:config pref:
 
browser.tabs.closeButtons; set to 3 

Would also be included in using the inverted icons when using mildly dark backgrounds (personas, glass, third-party OS themes), so it would also be more visible.

If it is not going to be included in this bug fix, are there plans to remove the above about:config pref or is this going to fixed in a entirely another bug# that I'm not aware of? 

Reopening bug 580194 until a response is received, change bug status according to the decision made after making a response to my question.

Comment 51

[Dão Gottwald [:dao]]

(In reply to rob64rock from comment #50)
Please file a new bug.

Comment 52

[rob64rock]

(In reply to Dão Gottwald [:dao] from comment #51)
> (In reply to rob64rock from comment #50)
> Please file a new bug.

I understand and I will do so:

Do you have any answers to any other parts of my question below before I go file yet another bug# for same reasons I filed bug 580194 for:

If it is not going to be included in this bug fix, are there plans to remove the above about:config pref or is this going to fixed in a entirely another bug# that I'm not aware of? 

If you don't know, can you discuss it with whom would know before responding back so quickly?

Thanks any help would be appreciative and keep up the good work...

Comment 53

[Dão Gottwald [:dao]]

(In reply to rob64rock from comment #52)
> If it is not going to be included in this bug fix, are there plans to remove
> the above about:config pref or is this going to fixed in a entirely another
> bug# that I'm not aware of?

There are no plans to remove that pref.

Comment 54

[rob64rock]

(In reply to Dão Gottwald [:dao] from comment #53)
> (In reply to rob64rock from comment #52)
> > If it is not going to be included in this bug fix, are there plans to remove
> > the above about:config pref or is this going to fixed in a entirely another
> > bug# that I'm not aware of?
> 
> There are no plans to remove that pref.

Thanks for the info I will file a new bug# soon...

Comment 55

[rob64rock]

(In reply to Dão Gottwald [:dao] from comment #51)
> (In reply to rob64rock from comment #50)
> Please file a new bug.

Just Filed: Bug 685040

Comment 56

[Daniel Desira]

verified [testday-20110930]

Comment 57

[Daniel Desira]

verified Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0

Comment 58

[[:Aleksej]]

Marking VERIFIED FIXED per comment #57.

Comment 59

[Simona Badau, Desktop QA]

Verified issue on Windows XP using a dark persona (e.g Black and Blue) and buttons are now visible. 

Mozilla/5.0 (Windows NT 5.1; rv:8.0) Gecko/20100101 Firefox/8.0
Mozilla/5.0 (Windows NT 5.1; rv:9.0a2) Gecko/20111002 Firefox/9.0a2
Mozilla/5.0 (Windows NT 5.1; rv:10.0a1) Gecko/20111003 Firefox/10.0a1