If you need to solve a tricky GTK+ problem in your application, gtkparasite is a very useful tool to have around. It lets you explore the widget hierarchy, change properties, tweak theme settings, and so on.

Unfortunately, gtkparasite is a tool for people ‘in the know’ – it is not part of GTK+, not advertised on our website, and not available out of the box on your average GTK+ installation.

At the Developer Experience hackfest in Berlin a few weeks ago, the assembled GTK+ developers discussed fixing this situation by making an interactive debugger like gtkparasite part of GTK+ itself. This way, it will be available whenever you run a GTK+ application, and we can develop and improve the debugging tools alongside the toolkit.

So, I’ve spent some of my spare time on this since the hackfest. The results are now in GTK+ master.  I’ve started from the gtkparasite code, but things have changed quite a bit, and some new things have appeared.

If you want to give it a try yourself, you can just use the Control-Shift-I or Control-Shift-D shortcuts to open an inspector window in any application that is using GTK+ master, or you can just set the GTK_DEBUG=interactive environment variable. Note that the keybinding will only work if GTK+ can find the org.gtk.Debug settings schema, so you probably want to run the application under jhbuild.

Here is a video of GtkInspector in action.

Among the things you can see in the video are interactive picking of widgets for inspection, visual debugging of graphic updates and baseline alignment, changing of widget properties, theme tweaks and general version and environment information.

I’ve also put together a page with ideas for future improvements to this debugging tool. If you are looking for a fun project to work on, this might just be it!

Thanks to Christian Hammond for creating gtkparasite and maintaining (over many years) such a useful debugging tool.  The GTK+ inspector would not exist without it.

I got asked today:

How do I make the sidebar in evolution as narrow as the one in thunderbird, so I can see all my mail folders ? Doesn’t GTK+’s awesome CSS theming make that sort of thing very easy ?

Well, I was hopeful that it would, but I figured that I better try before saying yes. Here is what I came up with:

First, create a local directory to hold our theme modification:

mkdir ~/.local/share/themes/Adwaita/gtk-3.0

Next, copy the gtk.css file from the system theme:

cp /usr/share/themes/Adwaita/gtk-3.0/gtk.css ~/.local/share/themes/Adwaita/gtk-3.0

Well, that didn’t go as expected:

What went wrong ? It turns out that the Adwaita css file is pretty minimal:

@import url("resource:///org/gnome/adwaita/gtk-main.css");

All the secret sauce is wrapped up in a resource bundle in the same directory. GTK+ automatically looks for such a bundle in the same directory as the css file when loading themes. With this knowledge, making my local copy of Adwaita work is a simple as linking the resources into the right place:

ln -s /usr/share/themes/Adwaita/gtk-3.0/gtk.gresource ~/.local/share/themes/Adwaita/gtk-3.0

The last step is to add a little bit of css to gtk.css:

EMailSidebar.view {
  font-size: 5px;
}

@import url("resource:///org/gnome/adwaita/gtk-main.css");

And we reach the desired end result:

I know what you are going to ask:

How did I come up with the selector EMailSidebar.view that matches the evolution sidebar ?

The answer is, I used gtkparasite, which is a pretty useful debugging tool for this sort of problem.

And because it is so useful, we are planning to include something very similar to it in GTK+ itself soon. You can follow this bug to track the progress.