[libreoffice-design] Changes to icons - SVG support, build-in HiDPI and conversion for dark theme, 32px icons

Hi,

I made some changes to how we handle icons and load images:

1.) It is possible to load SVG images from icon theme
Loading of SVG images was already possible (the rendering is done with
drawing layer when and svg parsing with "svgio") if you refer to an
image with "svg" file extension (which we practically never do).

I changed the image name resolving so it first strips away the
extension and then searches for a name with "png" and "svg" file
extension. The priority is "png".

This makes it possible to use the breeze icon theme directly from the
source SVGs. The sources are however bloated with additional tags that
are needed for editing. The icons zipped are about 4MB. I tried to
clean them up with svgo and the size drops to 1.3MB which is about
200kB less than the current version of breeze.

2.) HiDPI and conversion for "dark" theme support when loading images
Before, we scaled or converted the images for HiDPI all over the code
right before we got the image. This solution was working but it had
issues (for example sometimes we scaled the image when it was already
scaled) and we duplicated the code.

Now this is done directly when we load the image. This fixed all the
previously mentioned problems but it has its own problems - we don't
want to scale or convert all the images (for example document shadow).
For this there are ImageLoadFlags[1] where you can define if you want
to ignore scaling and if you want to ignore darkening when loading the
image.

I went fixed the most notable cases but there could be more. I also
removed the HiDPI scaling in the code but only if I could confirm it
in the UI.

When we have SVG icons available we don't scale them but render them
at scaled size so this makes the icons much more beautiful on a HiDPI
screen.

In addition to this changes I also changed internal representation of
the scaling factor to scaling percentage instead. This was done to
allow 1.5x scaling factor which can be useful when using a 1440p
screens.

[1] https://cgit.freedesktop.org/libreoffice/core/tree/include/vcl/implimagetree.hxx#n40

3.) Disk caching
Loading and rendering SVG can be slower than loading PNG files so I
added a disk caching when they are used. This is also used when icons
are scaled or converted so we just do this it once.

Currently the files are saved to UserProfile/cache/ directory - where
also "opencl_devices.log" and "opengl_devices.log" as well as binary
shaders are saved.

Each icon theme has its own directory, which contains directories with
"variants" for different scaling and conversion to dark.

4.) 32px icons
The breeze icon theme had 32px icons for quite some time now, but we
didn't support them in LibreOffice. I added the support but quite some
changes were needed and it still is not complete - only the initial
support to show them in the toolbar.
The main problem is that the code base assumes only 2 types of icons -
small and large (big) so we have in many cases only just a "bool"
attribute to determine if use large icons or not. I changed many but
not all code paths yet - there are still some occurrences where we
hard code for only 2 types.

Unresolved issues:

- I did not change or even think anything on how we will prepare the
SVG icons for the release. We will probably need to optimize the SVG
files but I don't know what tool to use (I used svgo but this one is a
node.js tool which i don't want to force down on people, the process
is also slow to do it for a developer's build)

- Not known yet when to clear the cached icons - I would do it when we
detect a new LO release.

- We have 32px icons for breeze but not for any other theme. When 32px
icons are selected for those themes the icons aren't shown.

- Only breeze has SVG icons in the repository prepared to be used. We
also have Sifr as svg icons (and Tango too - at least mostly I think)
and it would be good to put them into our repository.

Known issues:

- SVG icon for breeze 1.5 paragraph spacing is not correct - the issue
is with the icon

- with gtk3 the toolbar with 32px icons is slightly too big and the
toolbar buttons get cut-off. Also the problem with gtk2 but to a
lesser degree. The same problem occurs on Windows.

- SVG renders the icons slightly larger - instead of 48px it renders
at 50px (for example). The main issue is that the dimensions in pixels
that are defined in the SVG are not stored when primitives are
constructed so we mostly guess the image (logical) dimensions on
rendering.

- I didn't yet take language variants into account for caching.

- Object handles (also anchor) are not rendered correctly when
scaling. Problem is that they are contained in one image (image atlas)
and then cut into pieces afterwards. Now we scale the image but don't
scale the crop rectangles. Best thing to do here is to split them to
separate images.

- Some icons are not scaled correctly - like "new document" icon in
the toolbar which is exchanged somewhere (where?) for the current LO
component icon.

Future ideas:

- Dragging the image size through many layers could be avoided. We
read the configuration of what the current icon size is before we load
the image. We could register configuration search path where to look
for a certain use (like toolbar).

-----

To try out SVG icons you need to pack the content of directory
"icon-themes/breeze_svg" into a zip file, rename the file to
"images_breeze_svg.zip" and put it into "instdir/share/config". Then
the "breeze_svg" theme should become available to select as an icon
theme inside LO configuration.

Generally all are (quickly) solvable problems and no show stoppers so
I want to get this into 5.3. If you find an (non known) issue please
report it to me. I'll try to fix it as soon as I can.

Questions, ideas, comments, suggestions are welcome.

Thanks,
Tomaž

-- 
To unsubscribe e-mail to: design+unsubscribe@global.libreoffice.org
Problems? http://www.libreoffice.org/get-help/mailing-lists/how-to-unsubscribe/
Posting guidelines + more: http://wiki.documentfoundation.org/Netiquette
List archive: http://listarchives.libreoffice.org/global/design/
All messages sent to this list will be publicly archived and cannot be deleted