1. GTK+ for developers Matthias Clasen February 7, 2015

2. 3.12: March 2014 3.14: September 2014 3.16: Coming in March 2015
First half of my presentation: highlights of the last year of GTK+ development
Second half: some demos, mainly GtkInspector

3. Theme engines are on the way out Adwaita is included
Theme changes
Many CSS improvements
Theme engines are on the way out
Adwaita is included
The CSS implementation in GTK+ has become a lot more powerful over the last year. Examples include
outline for focus
Icon transforms, icon theme icons
Unset, all
Unclipped drawing
CSS improvements have allowed us to implement Adwaita completely in CSS – theme engines are no longer needed.

4. Theme engines are on the way out Adwaita is included
Theme changes
Many CSS improvements
Theme engines are on the way out
Adwaita is included
Adwaita is a polished, complete theme. You probably all know how it looks. It is the theme used by GNOME, and it was almost entirely written by the GNOME designers. Using CSS has the advantage that theme modification becomes easier for people who are not programmers. As part of incorporating Adwaita into GTK+, it has also been rewritten in sass, which is a css preprocessor coming from the ruby world. Nobody should say that GTK+ is stuck in old boring C – we do ruby!

5. Theme engines are on the way out Adwaita is included
Theme changes
Many CSS improvements
Theme engines are on the way out
Adwaita is included
So, why include Adwaita and make it the default theme? This is a bit of a break from our past for the GTK+ team – we used to emulate platform themes on Windows, OS X, etc, and tried to make GTK+ applications appear 'native'. Unfortunately, these 'native' themes were too often incomplete, or outright broken, and people trying GTK+ on other platforms were faced with the previous default Raleigh theme.

6. Theme engines are on the way out Adwaita is included
Theme changes
Many CSS improvements
Theme engines are on the way out
Adwaita is included
Same experience on all platforms
Coming in 3.16: HighContrast included as well
Now, we are focusing on delivering a polished experience, with a single theme that is guaranteed to be available everywhere.

7. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
We don't use icons that much anymore, and the cache is not that effective anyway, since we are copying the pixel data into cairo surfaces nowadays.

8. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
HighContrast before: 151M after: 51k
But mainly, with icon sizes getting ever bigger (256, 512, 1024), icon caches were getting a bit too big.

9. Icon theme changes
No longer include pixel data in icon cache

10. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Symbolic icons are very much a required part of the visual language of GNOME3 application. Our current svg renderer, librsvg, is not very actively maintained, and not exactly industry strength – and depending on librsvg is another hurdle for people who want to ship applications on other platforms.
So, if you currently ship symbolic icons in svg format with your application, you should take a look at the gtk-encode-symbolic-svg utility. It is included in GTK+ 3.14, and has a man page.

11. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Here is how the symbolic png looks in various sizes, compared to the svg. The rendering here appears in wrong colors.

12. Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them

13. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Coming in 3.16: HighContrast uses symbolics
HighContrast icons used to be rendered in a very special style with a thick double stroke. In 3.16, we will just use symbolic icons for this purpose.

14. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Coming in 3.16: HighContrast uses symbolics
Left: traditional HighContrast icon
Right: symbolic icon

15. Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Coming in 3.16: HighContrast uses symbolics

16. No longer include pixel data in icon cache
Icon theme changes
No longer include pixel data in icon cache
Can load symbolic icons from png files
Use gtk-encode-symbolic-svg to create them
Coming in 3.16: HighContrast uses symbolics
In 3.16, we just set -gtk-icon-style: symbolic in the css.
This is change is a considerable reduction in effort for creating a full set of icons: just provide one complete icon theme, with symbolics, and HighContrast is covered.
* {
-gtk-icon-style: symbolic; }

17. Changes in existing widgets
New notebook tab style

18. Changes in existing widgets
New notebook tab style
Notebook tabs have been reworked heavily. They have proper hover states now, you can add close buttons, and many other detail improvements. But this is still a bit of a compromise – we have implemented the new tab design as well as we could within the existing GtkNotebook code. More refinements will have to wait for a new implementation.

19. Changes in existing widgets
New notebook tab style

20. Changes in existing widgets
New notebook tab style
New dialog styles

21. Changes in existing widgets
New notebook tab style
New dialog styles
The new dialog styles were among the more controversial changes in the last year, since they rely on CSD. We can fall back to more traditional layout if client-side decorations are not available. This is controlled by a setting – you can just opt out of the new style. All built-in dialogs respect the setting.

22. Changes in existing widgets
New notebook tab style
New dialog styles
It is possible to make dialogs that adapt to the various environments with and without CSD, just like GTK+'s builtin dialogs do. Since this is a bit more involved than fits on a slide, I'll just point out that we have documentation for this.
I also gave a whole presentation at Guadec last year about dialogs, that you can probably find online.

23. Changes in existing widgets
New notebook tab style
New dialog styles

24. Changes in existing widgets
New notebook tab style
New dialog styles
Centering in boxes
The last point I want to mention here is smaller, but surprisingly useful in many situations.

25. Changes in existing widgets
New notebook tab style
New dialog styles
Centering in boxes
Boxes can now center one of their child widgets. This is an often-needed feature in the application designs. GtkHeaderBar needed this first, for window titles. But it is more generally useful.

26. Changes in existing widgets
New notebook tab style
New dialog styles
Centering in boxes

27. New widgets GtkPopover GtkActionBar GtkFlowBox
Of course, a bunch of new widgets have appeared over the last year as well.

28. New widgets GtkPopover GtkActionBar GtkFlowBox
Popovers – you have probably seen them in current GNOME 3 applications. They are similar to menus, but offer more freedom in terms of what you can put inside them. Think of it like a mixture between menus and dialogs.

29. New widgets GtkPopover GtkActionBar GtkFlowBox
Action bars are designed to slide in from the bottom of a window and offer a number of actions that make sense in the context, e.g. when there is a list with selections.

30. New widgets GtkPopover GtkActionBar GtkFlowBox
Flowbox is a reflowing grid that can contain arbitrary widgets. Most likely you'll want to use it to show things like in this example, thumbnails for some list of things.

31. New widgets GtkPopover GtkActionBar GtkFlowBox
You will see these in action in my demos later. For now, I will just point out that we have a step-by-step example of an application in the GTK+ documentation that shows how these (and other) new widgets can be used.

32. Glade support for new widgets
More new things
Gestures
Overlay scrollbars
Mir backend
GtkInspector
Coming in 3.16:
OpenGL support
GtkGLArea
Glade support for new widgets
We introduced a gesture framework in 3.14, and almost all the widget-level event handling in GTK+ is now done through this framework. Gestures here means recognized event sequences, be that touch or pointer events – like a double-click is a gesture comprised of 2 button press events.
Scrolling has seen a lot of work in the last year as well. What I call overlay scrollbars here refers to our attempt to make scrollbars less prominent when they are mainly used a position indicators on touch systems. At the same time, we need to keep scrollbars working as controls for mouse interation. The demo will let you see them in action.
Can't really say much about the mir backend
GtkInspector will be the topic of the remainder – it is an interactive debugger. This used to be available as a separate module, gtkparasite. We've integrated it into gtk.

33. Gestures - demo
Use eog ~/Pictures/black_cat.jpg

34. OpenGL – demo
Use gdkgears

35. Inspector - demo
Use gtk3-widget-factory

36. Thank you