Tuesday, August 30, 2016

Advanced and fast CSS styling for SWT

The strongest (or the weakest - depends of your angle) part of SWT is its deep system integration. But this means you get the Look'n'Feel of your system UI toolkit and any deviation from it (e.g. e4 theme engine) is either too limited or too slow or both.
On the other side if the underlying UI toolkit provides really advanced and declarative styling capabilities (like GTK+ does) making use of them from SWT is not hard at all. And we already start to use it extensively (to adjust tabs sizes, provide key bindings for tree expand/collapse) and usage will only increase over time. Best part of it is that it really works at the GTK level thus there is almost no performance penalty for sane operation (going wild with gradients and etc. will have a penalty of course) . Actually it's providing a custom GTK theme for you application allowing GTK to do all its caching and other optimizations . Something one can never achieve with custom drawing
But this would never be enough - there are just too many different themes used, everyone has his own personal preferences about amount of white space around widgets and etc. So best thing we can do from SWT side is provide sane defaults for everyone and open the door for the heavy opinionated people to tweak their Eclipse UI as much as GTK+ allows them.
Support for that is in master already. Download latest Oxygen nightly build (N20160829-2000 or newer), create your own css file (GTK+ docs explain things pretty well) and edit your eclipse.ini file to point to it by adding a line like -Dorg.eclipse.swt.internal.gtk.cssFile=/path/to/my.css in the -vmargs section and enjoy.
As a small example I created a really visually distinguishing style like:

button  {
    border-width: 1px;
    border-radius: 30px;

    background-image: -gtk-gradient (linear,
             left top,
             left bottom,
             color-stop(0.0,rgba(34,97,170,1)),
             color-stop(0.50,rgba(56,145,218,1)),
             color-stop(0.51,rgba(34,131,216,1)),
             color-stop(1.00,rgba(134,191,234,1)));
}
button:hover {
  box-shadow: inset 0 0 0 5px #3071A9;
}

to achieve this funky colors and hover effect.


This is just dummy example but at least there is the ability to tweak and make Eclipse match your personal preferences.

NOTE: The ability to point to your css file is only exposed on systems having GTK+ version 3.20 or newer as this is the first GTK version that has specified and thus stabilized the syntax to a state exposable to users.
NOTE 2: If there is anyone with experience in Win32 and/or Cocoa UI toolkits knowing if they provide such capabilities and how they can be exposed  please contact me as it would be nice to have such feature exposed for every SWT user not just for those on GTK. In order for this to happen we need people with deep knowledge and vested interest in these other UI toolkits.

1 comment:

Ralf Petter said...

Thank you for the the work on SWT. I am a big fan of the SWT Toolkit and in our company we use it to develop our ERP System.