637255 - Icons in Add-on bar not easily seen with some persona's [parity Add-on and Tab Bar icon visibility]

Status: RESOLVED INVALID

(Firefox :: Toolbars and Customization, defect)

Description

[Ken]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110227 Firefox/4.0b13pre
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110227 Firefox/4.0b13pre

Hovered over/selected, icons in Add-on bar not easily seen with some persona's.
In the Tab Bar this problem is handled using a gradient fill.


Reproducible: Always

Steps to Reproduce:
1. Select persona with dark background
2. Add dark Icons yo either Tab Bar and/or Add-on Bar
3. Hover over and/or select Icon
Actual Results:  
Hover over and/or select Icons:
  Dark Icons on Tab Bar with dark persona background can be seen.
  The same icon on a dark background on the Add-on Bar can be hard (to impossible) to see.


Expected Results:  
Hovered over and/or selected Icons, should be as easy to see no matter if they are on the Tab or Add-on bars.

Using code from "browser.css" for gradient fill for #TabsToolbar (background-image: -moz-linear-gradient), and merging it into the #addon-bar code fixes the problem.

-
Current code in "browser.css":

#TabsToolbar .toolbarbutton-1:not([disabled]):hover,
#TabsToolbar .toolbarbutton-1[open],
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover {
  background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%),
                    -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%);
  background-position: 1px -1px, 0 -1px, 100% -1px;
  background-size: -moz-calc(100% - 2px) 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

#addon-bar .toolbarbutton-1:not([disabled]):hover,
#addon-bar .toolbarbutton-1[open],
#addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover {
  background-image: -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15)),
                    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15) 30%),
                    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.15) 30%);
  background-position: left, left, right;
  background-size: auto, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
}

+
Adding the following code to my "userChrome.css" makes it as easy to see dark Icons in the Add-on bar as they are in the Tab Bar:

	#addon-bar .toolbarbutton-1:not([disabled]):hover,
	#addon-bar .toolbarbutton-1[open],
	#addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover {
	  background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.5)),
					-moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%),
					-moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%) !important;
	  /* background-color: lightgreen !important; */
	}

***
I will try to get some examples together in an attached Image if wanted/needed.

Comment 1

[Ken]

Attachment: example: Icons in Add-on bar not easily seen with some persona's

Circles:
  Green - highlighted (hovered over) icon on Tab bar;
  Yellow - some examples of hard to see icons (both Tab & Add-on bars);
  Red - highlighted icon on Add-on bar (using current Minefield or Firefox 4.0b12), hard to see difference;
  Cyan - (light blue) highlighted Add-on bar icon (with userChrome.ccs change [in comment #0]).

Comment 2

[Steve Scott (pxbugz)]

This problem should be fixed by Bug 580194

Comment 3

[Ken]

It looks like code has already been added to make Tab Bar icons more visible, the gradient fill for #TabsToolbar in "browser.css".
I'm not sure if this is the final solution or if Bug 580194, is going to make further changes (for the Tab Bar).

The 3 lines of code for the #addon-bar code (shown in comment #0) in "browser.css" could be changed to allow the icons to have the same gradient look/feel.


i.e. 3 (or 4 with CR/LF) lines of code:
  background-image:
    -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.5)),
    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%),
    -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%);

Comment 4

[Ken]

Comment #3 change (line #1):
  "more visible" to "more visible (in hovered over state)"

Comment 5

[Ken]

In looking at Bug 580194, and continuing to try to make the #addon-bar icons
"more visible ^", until I see if 'This problem is fixed by Bug 580194 (comment
#2)'.  I came up with the following code:
(which seems to help both bugs with dark persona's);

  #addon-bar .toolbarbutton-1:-moz-lwtheme {
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0),
rgba(255,255,255,.25)) !important;
  }

  #addon-bar .toolbarbutton-1:not([disabled]):hover,
  #addon-bar .toolbarbutton-1[open],
  #addon-bar .toolbarbutton-1 >
.toolbarbutton-menubutton-button:not([disabled]):hover {
    background-image:
      -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,.5)),
      -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%),
      -moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%)
!important;
  }

  #TabsToolbar .toolbarbutton-1:-moz-lwtheme {
    background-image:
      -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.25))
!important;
  }

  #TabsToolbar .toolbarbutton-1:not([disabled]):hover,
  #TabsToolbar .toolbarbutton-1[open],
  #TabsToolbar .toolbarbutton-1 >
.toolbarbutton-menubutton-button:not([disabled]):hover {
    background-image:
      -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
      -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%),
      -moz-linear-gradient(transparent, rgba(0,0,0,.25) 30%) !important;
  }


-----
Since I did not know if this code would be considered helpful for Bug 580194 &
not wanting to spam everyone attached to that bug, I didn't want to comment
over there.

But if anyone thinks this code might help, could you please let me (or, bug
580194, ..) know.
Thank you.

Comment 6

[Ken]

With this code change (not hovered over; Firefox or Add-on icons) are easily seen with dark, mid-range, .. Persona's:

#addon-bar .toolbarbutton-1:-moz-lwtheme {
  background-image:
    -moz-linear-gradient(bottom, rgba(255,255,255,.3), rgba(255,255,255,.9)) !important;
}
#TabsToolbar .toolbarbutton-1:-moz-lwtheme {
  background-image:
    -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.9)) !important;
}

Comment 7

[Ken]

I have come up with the following code and have been using it since some time in March/2011 (after trying different variations on the above):

	/* Add background highlighting, so Icons can be seen better with Persona's
	*/
	#addon-bar .toolbarbutton-1:-moz-lwtheme {
      background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.05), rgba(255,255,255,.3)) !important;
	}

	#addon-bar .toolbarbutton-1:not([disabled]):hover,
	#addon-bar .toolbarbutton-1[open],
	#addon-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover {
	  background-image:
		-moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(255,255,255,.6)),
		-moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%),
		-moz-linear-gradient(bottom, transparent, rgba(0,0,0,.25) 30%) !important;
	}
	
	/* Tab bar buttons
	*/
  	#TabsToolbar .toolbarbutton-1:-moz-lwtheme:not([hover])
	{
	  background-image: -moz-linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.3)) !important;
	}

	#TabsToolbar .toolbarbutton-1:not([disabled]):hover
	{
	  background-image:	-moz-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.6)) !important;
	}

	/* Arrow buttons on Tabs Bar
	*/
	#TabsToolbar .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-lwtheme,
	.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-lwtheme
	{
	  background-image:	-moz-linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.4)) !important;
	}

	#TabsToolbar .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
	.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover
	{
	  background-image:	-moz-linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.7)) !important;
	}

+++++++
This code is just a modification of the "-moz-linear-gradient" code in Firefox's existing "browser.css" file (dated 2/27/2011).

Comment 8

[Siddhartha Dugar [:sdrocking]]

Partly resolved by bug 671553. Bug 626221 should handle the rest.

Comment 9

[Matthew N. [:MattN]]

The add-on bar was removed in Firefox 29.