icons not pixel-perfect

[Merci-chao]

The icon of toolbar buttons are not pixel-perfect. If you are using PS or AI, you can enable the snap to pixels option and tune your icons.

[Noitidart]

Hi there Merci! I'm actually very poor with graphics. I tried my best. Would you be able to help me out with it? Someone just sent me this attached PSD that gives all the different variations for the different operating systems. He discussed it here - https://discourse.mozilla-community.org/t/ux-the-different-colors-for-toolbar-icons-per-platform-win-nix-mac/8655/8?u=noitidart

Please see attached.
skin.zip

[Noitidart]

Oh! Are you talking about the icons in the toolbar of the image editor?

Those I got from http://www.flaticon.com/ and then I dropped them into fontello to make a font out of them - http://fontello.com/ - it was really hard for me. I would love to collaborate with you on images. If you are available. If not, no problem! :)

[Merci-chao]

Well, I'm just actually the someone who sent you the PSDs. XD
I thought maybe you were using PhotoShop or Illustrator to draw your icons with vector images.
The files I sent to you may be useless if you are not familiar with drawing vector icons in PhotoShop...

[Noitidart]

Oo! Haha that is so cool of you to follow my work from that topic dnd provide feedback on it! I really appreciate it! You are probably very busy supporting your addon. You are so right, I opened up those PSDs and was totally overwhelmed! Haha I'll understand it sooner or later

[Merci-chao]

No pain no gain, brother.
I have done the aero version of your toolbar button for you. (Luckily the icon is simple enough and I need not spend much time. : p)
https://drive.google.com/open?id=0B3rlip_sagCYZGhvTFA2bEV5MjQ
For example:

1. Open the "toolbar-inverted.psd" I sent to you previously;
2. Find the "Layers" panel in PhotoShop, right-click on the only layer, choose "Copy Layer Style";
3. Open the "dark.psd" in the zip file above, right-click on the layer, choose "Paste Layer Style";
4. Now you can see it changed to the inverted style;
5. File -> Save as -> PNG file;
6. A "dark-inverted.png" is done.

[Noitidart]

Oh wow!! Thank you so much friend!! This will really help me get them done. Sincerest thanks!!

[Merci-chao]

Anyway, in my example, there is not enough available pixels to draw. The middle of dashed outline looks like a dot more than a dash. You may need to think about how to tune the icon, using 3 pixels but not the 2 pixels of current, etc.

[Merci-chao]

It seems I forgot to enable the sharing of the link above. It should be accessible now.

[Noitidart]

Wow very interesting @Merci-chao thanks for this info!

[noureddin]

Hello,
I'm sorry for commenting on this old issue, but I find it still open.
I'm a graphic designer. Assuming there is no technical difficulty, it's better to use vector (svg) icons instead of raster (png) ones. You will need only one icon for all sizes of an icon, and it'll never look pixelated. I can help vectorizing the icons if needed.

[Noitidart]

No way! That is so awesome @noureddin! There is no problem at all for commenting on old issue, it is very very much appreciated! Old issues are the most troublesome because I was not able to do it. With all the other coding development and performance enhancements I couldn't find the time to learn graphics to do this. If you can really help me out here that would be sooooo awesome! Barakallahfi!

[Noitidart]

@noureddin this is where I got the icon from - https://www.iconfinder.com/icons/99958/screenshot_icon#size=128 - in case it helps :)

[noureddin]

I thought the needed icons are those in your attached file "skin.zip", so I began with them. This file, modes@2x.svg.zip, contains the vectorized version of modes@2x.png in "Linux" folder in your attached file "skin.zip". Please try it and tell me how it works, and if I should continue the same way, or I should do something different.

Actually, If the site allows downloading the icons in a vector format like svg, I don't need to do anything. But it doesn't seem to do so.

[Noitidart]

Oooo haha @noureddin those are files for @Merci-chao's addon. He gave me them as example.

[noureddin]

Ok, No problem. :D Where can I get the icons used in your addons?

[Noitidart]

I just need this one here please - https://www.iconfinder.com/icons/99958/screenshot_icon#size=128

:)

The other icons are png but the issue @Merci-chao refers to only affects this one.

[noureddin]

I thought it's about the icons in general. Anyway, this is the logo in svg, Screenshot.svg.zip. Please try it and let me know if it could be improved in anyway. :)

[Noitidart]

Wow thank you! So cool! I struggled so much to make it haha its a joke

Could you please make the different colors for the different systems. As @Merci-chao did in his addon - he lists paths to the images based on platform here - https://addons.mozilla.org/en-US/firefox/files/browse/498411/file/chrome.manifest#L4

And then his images are here - https://addons.mozilla.org/en-US/firefox/files/browse/498411/file/chrome/skin/menuPanel@2x.png#top

He says:

it supports all default themes, including XP, Luna Silver, Aero, Win 8, Win 10, Linux, OS X and Yosemite, and all corresponding menu panel, inverted and 2x versions.

I did some research and mentioned in the original post of the topic - https://discourse.mozilla-community.org/t/ux-the-different-colors-for-toolbar-icons-per-platform-win-nix-mac/

But the way @Merci-chao did it is the perfect way. @Merci-chao may you please chime in if you have some time, it will really help @noureddin :)

[noureddin]

SVG files use CSS attributes, and can use an external CSS file. Extract this file, Screenshot.zip, and open the SVG file in Firefox, and hover over the icon, then take a look the contents of the CSS file. ;)

So, all those versions can be made with only two files: an SVG and a CSS.

[Noitidart]

Oh wow! No way! That is super duper cool thank you @noureddin !! I will definitely try that right now! :)

[Noitidart]

Im having a tricky time getting it to work. This is my code:

<link href="Screenshot.css" rel="stylesheet" type="text/css" />
<img src="Screenshot.svg" />

Its showing as black for me. :(

[noureddin]

As far as I can understand from this page (Sections "Using SVG as an <object>" and "External stylesheets for SVG"), the SVG must be linked as <object>. So, your HTML file should contain this instead:
<object type="image/svg+xml" data="Screenshot.svg"></object>
And there is no need to link the CSS file again, unless it's used in the HTML itself.

[Noitidart]

Ohh sweeet!! That fixed it! I'll go collect the different styles of the different OS and share with you the result, this is real exciting!

[Noitidart]

I just created branch osversion-icon. I got the stylesheet overriding per os and it works when access raw, but when used as list-image-style it wont work and thats how the CustomizableUI.jsm makes the the toolbarbutton :( - need to figure out how to get the internal style sheet to work with list-style-image otherwise we'll have to make unique image per, which will stick. the unique styleshet per is much better.

@noureddin do you know how ot make the internal stylesheet apply when the svg is used as list-style-image?

Here is inspection on it:

[noureddin]

@Noitidart I don't know but I try to find a solution.

Also, if it's possible to embed the CSS in the SVG file, it may work. But it may not be easy in this case.

[noureddin]

I can't find an easy solution, sorry! I am not an expert, so there may be a solution but I couldn't find it.

Anyway, it should work with internal CSS (written inside the SVG file), so you can tell me all the fill attributes, and I'll generate the required SVG files.

[Noitidart]

Thanks @noureddin for that offer. I'll do some research to get all those. But I wanted to ask @Merci-chao if he could share the style attributes. He is familiar with it.

Hi @Merci-chao, could you please share how the style i would apply to each image? Not the exact thing, but how you think it would look, like color gradient, you can just say it in words too and I can hammer out the code. :)

[Merci-chao]

It is impossible to apply styles to the SVG image referenced by list-style-image. So you can only embed the style inside the SVG file.

If you want to have a dynamic appearance, there are two ways to achieve:

1. Use "icon.svg#aero" to reference specified image inside your SVG file. It means you may need to draw multiple images in a single SVG file.
2. Use "icon.svg?style=aero" to provide arguments, embed JavaScript inside SVG file to extract the arguments, and apply the styles dynamically.

I've tried to use SVG file with the second method at the first time. However, it is difficult to implement the inner shadow effect in SVG, and the outcome is not perfectly matched with the Firefox default style.

There is not much information in MDN, so you may need to Google the documents and examples.
Gradient
Shadow
Inner Shadow

[noureddin]

Great! Thanks a lot, @Merci-chao!

After searching, I found out that using icon.svg#aero is called "SVG Stacking". I tried it and it works fine, although it was a little difficult at first.

Anyway, this file, Sceenshot.zip, contains the logo with four styles and an HTML page to try it with list-style-image. I tried to use a CSS gradient, but it didn't work. Only an SVG gradient worked (I don't know way). The MDN page, you mentioned, about SVG gradients really helped me. Thanks!

Preview:

[Noitidart]

@noureddin oh wow thank you so much! I missed your reply, those are so beutiful!

[noureddin]

@Noitidart You're welcome! No problem. You can give me a list of the required colors/gradients and I will put them into the SVG.

[Noitidart]

Hey @noureddin I'm going to get v1.12 out and then I have to take a break. I have to work on future compatability so am learning some C++. Firefox is moving to WebExtensions and my addons like NativeShot will be hit hard. I'll get back to you on these images in the future (near future hopefully) please. :)

[noureddin]

OK. No problem! Good luck! :)