Last Comment Bug 580194 - Tabbrowser icons or buttons are hard to see on mildly dark backgrounds (personas, glass, third-party OS themes)
: Tabbrowser icons or buttons are hard to see on mildly dark backgrounds (perso...
Status: VERIFIED FIXED
[qa!][testday-20110930]
: regression, verified-aurora, verified-beta
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: x86 Windows XP
: -- normal with 5 votes (vote)
: Firefox 8
Assigned To: Dão Gottwald [:dao]
:
Mentors:
http://i28.tinypic.com/2jes8ib.jpg
: 583295 587032 (view as bug list)
Depends on: 671553 679801
Blocks: 544820 569255 626221 637255
  Show dependency treegraph
 
Reported: 2010-07-20 01:30 PDT by rob64rock
Modified: 2013-11-12 00:56 PST (History)
39 users (show)
jbecerra: in‑litmus?
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
.x+


Attachments
Icons on Variable Backgrounds - 01 (621.17 KB, image/jpeg)
2011-03-02 08:12 PST, Stephen Horlander [:shorlander]
no flags Details
Inverted Dropdown (230 bytes, image/png)
2011-08-03 22:31 PDT, Stephen Horlander [:shorlander]
no flags Details
Inverted New Tab (247 bytes, image/png)
2011-08-03 22:32 PDT, Stephen Horlander [:shorlander]
no flags Details
Inverted Tab Arrow (250 bytes, image/png)
2011-08-03 22:32 PDT, Stephen Horlander [:shorlander]
no flags Details
Inverted Panorama (524 bytes, image/png)
2011-08-03 22:33 PDT, Stephen Horlander [:shorlander]
no flags Details
just the images (2.76 KB, patch)
2011-08-03 23:30 PDT, Dão Gottwald [:dao]
no flags Details | Diff | Splinter Review
use the new images (14.20 KB, patch)
2011-08-03 23:51 PDT, Dão Gottwald [:dao]
no flags Details | Diff | Splinter Review
use the new images (14.24 KB, patch)
2011-08-04 05:44 PDT, Dão Gottwald [:dao]
no flags Details | Diff | Splinter Review
use the new images (14.09 KB, patch)
2011-08-04 11:45 PDT, Dão Gottwald [:dao]
shorlander: review-
Details | Diff | Splinter Review
Blurry Scroll Arrow (95.04 KB, image/jpeg)
2011-08-05 08:34 PDT, Stephen Horlander [:shorlander]
no flags Details
use the new images (14.09 KB, patch)
2011-08-05 09:59 PDT, Dão Gottwald [:dao]
shorlander: review+
Details | Diff | Splinter Review

Description rob64rock 2010-07-20 01:30:04 PDT
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 1 Dão Gottwald [:dao] 2010-08-02 10:23:50 PDT
*** Bug 583295 has been marked as a duplicate of this bug. ***
Comment 2 Mike Beltzner [:beltzner, not reading bugmail] 2010-08-10 13:52:00 PDT
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] 2010-08-11 12:29:07 PDT
This affects all icons in the tab bar.
Comment 4 Christian Gerefalk 2010-08-13 08:59:16 PDT
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 2010-08-13 09:42:33 PDT
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] 2010-08-13 10:38:18 PDT
(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 7 Steve Scott (pxbugz) 2010-08-16 12:16:52 PDT
*** Bug 587032 has been marked as a duplicate of this bug. ***
Comment 8 Mike Beltzner [:beltzner, not reading bugmail] 2010-08-31 12:43:50 PDT
Dao: next time, please renominate! Based on your comment, yes, this blocks :)
Comment 9 rob64rock 2010-11-04 02:51:10 PDT
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 2010-12-13 11:43:50 PST
Damn form autocomplete.
Comment 11 Bill Gianopoulos [:WG9s] 2010-12-23 08:13:22 PST
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 :Ehsan Akhgari 2011-02-09 22:24:14 PST
Is there a good reason that this blocks betaN?  If not, it should be moved over to final+.
Comment 13 Stephen Horlander [:shorlander] 2011-03-02 08:12:34 PST
Created attachment 516268 [details]
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] 2011-03-03 07:19:53 PST
** 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] 2011-04-06 01:26:39 PDT
Would love to see some activity on this bug.
Comment 16 Tan Wei Lin Jason [:Ryuji] 2011-06-23 06:14:37 PDT
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 2011-06-23 07:13:49 PDT
(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) 2011-07-21 16:16:02 PDT
All of this bug's dependencies are fixed.
Can we close this?
Comment 19 Dão Gottwald [:dao] 2011-07-21 16:34:44 PDT
(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] 2011-07-22 00:17:29 PDT
(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 2011-07-28 10:55:51 PDT
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] 2011-07-28 10:57:27 PDT
(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] 2011-07-28 10:59:06 PDT
Can handle it in bug 626221
Comment 24 Paul [pwd] 2011-07-28 12:28:50 PDT
Don't forget we need the left and right arrow for the tab bar too.
Comment 25 rob64rock 2011-08-01 01:42:52 PDT
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 2011-08-01 01:45:46 PDT
Typo in the last post: not bug 671533, meant bug 671553
Comment 27 Stephen Horlander [:shorlander] 2011-08-03 22:31:41 PDT
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.
Comment 28 Stephen Horlander [:shorlander] 2011-08-03 22:32:15 PDT
Created attachment 550607 [details]
Inverted New Tab
Comment 29 Stephen Horlander [:shorlander] 2011-08-03 22:32:45 PDT
Created attachment 550608 [details]
Inverted Tab Arrow
Comment 30 Stephen Horlander [:shorlander] 2011-08-03 22:33:19 PDT
Created attachment 550609 [details]
Inverted Panorama
Comment 31 Dão Gottwald [:dao] 2011-08-03 23:05:40 PDT
I can pick it up from here.
Comment 32 Dão Gottwald [:dao] 2011-08-03 23:30:07 PDT
Created attachment 550611 [details] [diff] [review]
just the images
Comment 33 Dão Gottwald [:dao] 2011-08-03 23:51:23 PDT
Created attachment 550614 [details] [diff] [review]
use the new images
Comment 34 Peter Henkel [:Terepin] 2011-08-04 01:25:46 PDT
(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] 2011-08-04 05:44:36 PDT
Created attachment 550663 [details] [diff] [review]
use the new images
Comment 36 Stephen Horlander [:shorlander] 2011-08-04 10:27:59 PDT
(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] 2011-08-04 11:23:45 PDT
This one: http://userstyles.org/styles/44128/fx4-dropmarkers-like-mockups
Comment 38 Stephen Horlander [:shorlander] 2011-08-04 11:33:19 PDT
(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] 2011-08-04 11:34:40 PDT
Thank you.
Comment 40 Dão Gottwald [:dao] 2011-08-04 11:45:55 PDT
Created attachment 550771 [details] [diff] [review]
use the new images
Comment 41 Stephen Horlander [:shorlander] 2011-08-05 08:32:31 PDT
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] 2011-08-05 08:34:13 PDT
Created attachment 551041 [details]
Blurry Scroll Arrow
Comment 43 Dão Gottwald [:dao] 2011-08-05 09:42:31 PDT
(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] 2011-08-05 09:59:33 PDT
Created attachment 551076 [details] [diff] [review]
use the new images

missing comma added
Comment 46 Peter Henkel [:Terepin] 2011-08-14 04:10:00 PDT
Why are you showing us something that we already know about for a long time?
Comment 47 bogas04 2011-08-14 04:10:41 PDT
Apologies my bad.
Comment 48 :Ms2ger (⌚ UTC+1/+2) 2011-08-16 03:14:09 PDT
http://hg.mozilla.org/mozilla-central/rev/2c01344b6929
Comment 49 :Ms2ger (⌚ UTC+1/+2) 2011-08-16 03:14:40 PDT
And

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

as well
Comment 50 rob64rock 2011-08-31 02:53:27 PDT
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] 2011-08-31 02:55:11 PDT
(In reply to rob64rock from comment #50)
Please file a new bug.
Comment 52 rob64rock 2011-08-31 03:09:13 PDT
(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] 2011-08-31 03:26:04 PDT
(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 2011-08-31 03:53:11 PDT
(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 2011-09-06 17:31:24 PDT
(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 2011-09-30 05:26:09 PDT
verified [testday-20110930]
Comment 57 Daniel Desira 2011-09-30 06:56:18 PDT
verified Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0
Comment 58 [:Aleksej] 2011-09-30 07:00:41 PDT
Marking VERIFIED FIXED per comment #57.
Comment 59 Simona B [:simonab ] 2011-10-03 06:40:46 PDT
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

Note You need to log in before you can comment on or make changes to this bug.