1022600 - Icon for utilities button in about:addons isn't legible in High Contrast mode

Status: VERIFIED FIXED

(Toolkit :: Add-ons Manager, defect)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Attachment: screenshot

The icon used for utilities button in about:addons isn't legible in High Contrast mode, as it lacks adequate contrast. See attached screenshot.

Comment 1

[Mike de Boer [:mikedeboer]]

Attachment: devtools-cog.png

Devtools cog used in the dark theme.

Comment 2

[Tim Nguyen :ntim]

Attachment: options.svg

For anyone who wants to work on this bug.

Comment 3

[Tim Nguyen :ntim]

Note that the asset is already high-contrast ready.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: Bug1022600.patch

This patch exchanges the utilities.png with the utilities.svg on OS X and Windows.

On OS X I have chosen fill="#4d4d4d" like the Yosemite toolbar icons have. I leaved the fill="graytext" for Windows from ntim's attachment. This gives the icon on HC-themes a different color than the text (for example on one it's green instead of yellow). If we would use -moz-DialogText, the color would be the same but on default theme it would be black, and this is to dark.

If you want, I could also add two colors for default and non-default themes.

Comment 5

[Tim Nguyen :ntim]

Comment on attachment 8554168 [details] [diff] [review]
Bug1022600.patch

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

I think the utilities.svg file can be put in shared. You can use utilities and utilities-native as IDs for the new common file.

Comment 6

[Matthew N. [:MattN]]

Comment on attachment 8554168 [details] [diff] [review]
Bug1022600.patch

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

(In reply to Tim Nguyen [:ntim] from comment #5)
> I think the utilities.svg file can be put in shared.

I would support putting the file in shared but…

> You can use utilities and utilities-native as IDs for the new common file.

I don't think "utilities-native" is descriptive enough. We could also just have one shape in utilities.svg and pre-process a CSS rule to change the fill property so we don't have to duplicate the shape. If we had a CSS media query to match the OS X versions you care about then we could use that instead of pre-processing.

I actually think the patch is okay without using shared though since we're not duplicating the shape a third time for Linux.

(In reply to Richard Marti (:Paenglab) from comment #4)
> On OS X I have chosen fill="#4d4d4d" like the Yosemite toolbar icons have.

Is this colour used in mozilla-central already? A search for "4d4d4d" doesn't show it. I mostly want to make sure colours are consistent and it's not clear to me where this is coming from. Are the other colours written in hsl/rgb() syntax? If so, use the same syntax in case people want to replace that colour.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: Bug1022600.patch

I'm using now the color #424f5a from Project Chameleon for OS X and Windows default themes (to be ready for bug 989469). For the Windows non-default themes it's still GrayText. To switch I'm using utilities and utilities-native as IDs like we are already using for the in-contnet checkbox and radio SVGs to be consistent.

Comment 8

[Matthew N. [:MattN]]

Comment on attachment 8556691 [details] [diff] [review]
Bug1022600.patch

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

Ah, I don't mind the "-native" suffix now that I realize the suffix is put on the one using system colors instead of the one that I thought was getting hard-coded with a supposedly native OS X color.

Awesome, thanks!

Comment 9

[Tim Nguyen :ntim]

Comment on attachment 8556691 [details] [diff] [review]
Bug1022600.patch

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

No prettiness for linux ?

::: toolkit/themes/osx/mozapps/extensions/extensions.css
@@ +296,5 @@
>    padding-left: 3px;
>  }
>  
>  #header-utils-btn {
> +  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");

Shouldn't this be utilities.svg#utilities ?

Comment 10

[Richard Marti (:Paenglab)]

Attachment: Bug1022600.patch

(In reply to Tim Nguyen [:ntim] from comment #9)
> Comment on attachment 8556691 [details] [diff] [review]
> Bug1022600.patch
> 
> Review of attachment 8556691 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> No prettiness for linux ?

The other buttons on Linux have GTK icons, so I decided to stay consistent. With bug 989469 I can use this icon and remove the icons from the other buttons under Linux.

> ::: toolkit/themes/osx/mozapps/extensions/extensions.css
> @@ +296,5 @@
> >    padding-left: 3px;
> >  }
> >  
> >  #header-utils-btn {
> > +  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg");
> 
> Shouldn't this be utilities.svg#utilities ?

Correct.

Comment 11

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/b0308591015d

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/b0308591015d

Comment 13

[Andrei Vaida [:avaida]]

Verified fixed on Nightly 39.0a1 (2015-03-09) and Aurora 38.0a2 (2015-03-09), using Windows 7 (x64) and Windows 8.1 (x64).