HiDPI graphics and icons

[drasbeck]

Most if not all graphics are not HiDPI ready. Tested on Retina MacBook Pro (OS X 10.11.4), FF 45.0.2.

[johngraciliano]

This is an issue inherited from the original theme. I have done some work to fix it, e.g., l believe all large icons in the about pages are now in svg format (thus scale independent). I also worked on creating svg images for the toolbar icons but never finished implementing it. Currently, the Sync Tabs icon is the only toolbar icon in svg format (please check it). Using svg has a high cost on the theme's performance, but that is what I prefer. So I am trying to migrate as many as possible graphics into that format.* I found @louischan made double resolution png images for most toolbar icons.

@drasbeck: I have limited resources to work, so I have never tried the theme in a high dots per inch (HiDPI) platform. Can you help fixing this issue? I can do most of the work except for testing. On that regard, I am not even fully aware of what are the problem areas. I need someone to test any progress and provide feedback.

I may also need some help designing a work plan. I believe I should focus first on fixing anything regarding the address bar which hopefully means the stop/reload and the drop-down buttons in your sample image. But I think some icons that show in the identity box, e.g., when using a plugin such as flash, may also need to be fixed. I believe the border for the tabs may need to be fixed quickly too (if it is needed at all). Any drop/arrow images, search glasses, alternative close icons, and alternative pointers should probably follow. Then, the toolbar icons could be fixed, and later anything else missing.

P.S. There have been many changes in _Firefox_'s trunk lately. Most importantly, the autocomplete/suggestion pop-up box for the search bar is different and needs to be updated. This does not yet affect the new general public release, _46_, but it is a priority over any other issues. Perhaps changing the drop-down and the stop/reload icons could be tagged to that correction.

---

*I am changing the close button for an svg design, yet this may be unnecessary and comes with a minor performance cost.

[drasbeck]

@johngraciliano I would love to help, but I haven't much experience in the HiDPI department either. But basically it's just a 2x pixel density, as far as I gather.

I see the .svg-changes to the close icon, and it definitely works as intended. =) So I suggest just going the .svg road. Unless it is really taxing on the system?

[johngraciliano]

@drasbeck: I only need pointers to what needs attention, and confirmation about any progress. As I stated, this is a project I adopted and I cannot see how it looks in a HiDPI platform. Also, I know the theme may look different in a mac than in the platform I have, so just captured images of the browser in a mac are helpful.*

Actually, the current release for Simple White X does not use svg for the close icon. When Firefox detects HiDPI media, the current theme switches to higher definition images for that icon and perhaps a few others. Yet I am changing that icon to use svg but I had to find a way to improve the speed it was loaded, otherwise the close images for non selected tabs would take longer to load when Firefox starts! I think the image for the Sync Tabs icon (the only svg within those icons) takes longer to load when Firefox starts than the rest, but I am not doing anything about that for now.

To understand the pros and cons about changing to svg you may use the following analogy: Raster images such as png are pages in a coloring book, while vector images such as svg are pages in a tracing book. But in svg the connecting dots have mathematical formulas for the exact curves in the shapes.\ While in png all the shapes are traced over the grid lines of graph paper, so your images are those of mosaics.

---

*An image how the autocomplete panel looks in any non Windows 8 platform would be useful for me at this moment. More images would be better. **Actually that is why I like svg, I am a mathematician and I write pictures as code with no special graphics software.

[Lootyhoof]

I've actually been working on something similar for my theme for some time. It's a little rough, and uses icons only specific to Pale Moon, but I hope this helps:

https://gist.github.com/Lootyhoof/1fab771676a2f28c0af2a38b6b014e7a

I'd love feedback on this, by the way, as I can't say I'm great with SVG (plus SVG editors love spitting it out in the wrong format...).

As for how to see how icons look in HiDPI, you can do so in any resolution. In about:config, change the value of layout.css.devPixelsPerPx to whatever DPI you wish.

[johngraciliano]

Hi. Thank you for the file and the input. I can see your images are not exactly like the those in the theme. As I mentioned, I already worked on an svg version of the toolbar icons on my own (also of their larger versions). I tried to make them almost identical to the originals, but I made some minor modifications. My file is not so properly labeled yet, the icons are just identified by numbers, and it is filled with trash code at this moment. However, the graphics are more readable because it is made with Notepad++. The following image has 170% rendering of the images (I was not able to attach the svg). Thank you so much with the tip to control the DPI. Before knowing that I would enter chrome://browser/content/browser.xul in the address bar to see a browser inside the browser. Of course the screen has to be seen at a greater distance to have a better effect. However no simulation replaces entirely the real thing. That is why I need feedback.

[johngraciliano]

As a temporary patch, I posted Simple White X SVG Icons elsewhere. Please try it and comment.