GUADEC 2015 was awesome!

I went to GUADEC 2015 which was help in Gothenburg between friday 08/07 and wednesday 08/12, here is what I did there.

Deserved thanks

First of all, I would like to sincerely thank the organizers of this GUADEC, they made an amazing job! =)

I also would like to thanks the GNOME Foundation, the GNOME Travel Committee and the persons volunteering to work for this committee as I wouldn't have been able to attend the conference without their sponsorship.

Volunteering

I volunteered to help during this GUADEC and it was a great experience. I only had few work to do as there was a ton of volunteers, all I did is to help cleaning the rooms and to be in charge of presenting the speaker, filming its talk and give him a gift for two talks on sunday.

Being able to see the Beamer theme I wrote used was quite pleasing too. =)

The core days

On Friday

• Alexander Larsson's talk on xdg-app got me really excited about this big shift the Linux desktop is taking,
• Emmanuele Bassi's talk on GSK showed us how it will be used as an intermediate layer between GTK+ and GDK,
• Caolán McNamara taught me about the relation between LibreOffice and GTK+3,
• Matthias Clasen showed some pretty interesting stuff that GTK+ can do,
• Alexander Bokovoy's talk taught me a LOT of stuff I didn't now about like double factor identification, and how they are use by GNOME for enterprise desktops,
• I gave a lightning talk on my work on Boxes this summer.

On Saturday

• Frédéric Crozat talked about what have been done at SUSE to adapt GNOME to their enterprise customers,
• Christian Hergert made me actually use Builder =),
• Jan-Christoph Borchardt gave a engaging talk on how ownCloud and GNOME would have a tighter relationship.

On Sunday

• Jonas Danielsson got me excited about the future of GNOME Maps =),
• Pamela Chestek gave an awesome talk on how she helped GNOME to stay GNOME,
• Jussi Pakkanen talked about the Meson build system,
• I filmed Markus Mohrhard's talk on LibreOffice integration within GNOME Document, with an interesting first part by Pranav Kant who showed his summer work on LibreOffice and GTK+3,
• I filmed David King's talk on logging and statistics,
• The lightning talks were awesome: they features a troll and an helicopter pilot.

The BoF sessions

On Monday

• I attended the informal GNOME Maps BoF, it was extremely interesting to get more information on the future of the project. I looked at the Mapbox GL C++/ vector tile library to check if it was interesting to bind it/port it to C/GObject.

On Tuesday and Wednesday

• I hacked on Boxes with my mentor Zeeshan Ali, improving my patches for the new collection filter and the list view.

The faces

• It was a great pleasure to see lots of known faces,
• And obviously discovering lots of new ones was great too, =)
• My face—name—nickname relationships got improved!

The places

• The free ferry was great =),
• The Slottsskogen park and its zoo were really cool to visit,
• The city is full of interesting pubs,
• Walking in Gothenburg is really enjoyable once you understood were are the bike lane and that you should never ever put a foot on one =p,
• There are lots of vegetarian and vegan restaurants, and the ones which are not have good veg(etari)an offers, which is nice when you want to eat as a group,
• Staying at the hostel was a nice experience as you never stop to be in the GNOME communitythis way!

Adding a list view to Boxes

A list view was a requested feature for Boxes, I decided to commit myself to implement this during this GSoC.

March: exploring the idea

I started working on adding a list view to Boxes in march 2015. By that time, the expected columns for the list view where:

• the thumbnail;
• the machine's name;
• a system monitor;
• the machine's IP;
• the OS' icon;
• an icon to display show a favorite machine.

Implementing such a view using libgd's MainView (the same widget responsible of the icon view) required me:

• to learn how to write a custom GtkCellRenderer for the system monitor;
• to find how to get a machine's IP adress;
• to find how to OS icons are retrieved in Boxes.

Unfortunately, I had to pause the implementation of this feature to focus on my studies.

July 6–12: designing the list view

I joined a chat on Google Hangout where Alan Day, Jakub Steiner and Zeeshan Ali on july 8th. During this talk, Zeeshan stated its desire to stop using libgd—suggesting to use GtkFlowBox and GtkListBox to implement the icon view and the list view respectively—and Jakub produced the following mockup. Even though I didn't talked much (if at all), it was really enriching to follow such a discussion.

As you can see, there is no system monitor nor the OS' logo, and columns to show the machine's state and a selection state have been added. I then scrapped the system monitor cell renderer I implemented and integrated the previous days.

With this new design, I had enough material to start implementing the list view.

I needed the content of the widget to be sortable and filterable, hence I implemented the BoxesSortedListModel and BoxesListModelFilter classes to allow me to do so, as I didn't notice at that time that both GtkFlowBox and GtkListBox offered such capabilities.

I started producing the BoxesCollectionItemListView widget to render a collection item in the list view and the BoxesCollectionListView to implement the list view. By that time, most of the expected features worked but annoying bugs were remaining and the look was far from being polished.

July 13–19: polishing the list view

I removed the ListModelFilter and SortedListModel classes to favoritize GtkListBox's filtering and sorting functionalities.

The theme have been refined using CSS, the selection mode have been added and several bugs have been discovered and fixed.

Bug #752615 in GtkListBox have been discovered, a workaround have been added in Boxed.

July 20th: submitting patches

On july 20th, I reorganized the patches and polished their logs to look nicer, then I attached them to bug #733252. Their review is in progress and I hope they will be committed before the UI freeze.

GUADEC: reworking the thumbnails

During the 2015 edition of the GUADEC, I've been able to meet my mentor, Zeeshan, to more easily discuss the design of my code and more importantly, the disturbance created by the changes I made.

Following is a list of the problems I encountered and how I tried to solve them.

1. • Problem: The MachineThumbnailer class have been created because the icon view needed a GdkPixbuf as a thumbnail, and the list view's thumbnail is expected to have a different style than the one harcoded in MachineThumbnailer.
   • Solution: Create the custom MachineThumbnail widget, responsible of rendering a machine's thumbnail, taking advantage of the CSS styling and the states to offer a more refined view.
2. • Problem: We now have two very close yet slightly different objects, some refactoring may be a good idea.
   • Solution: Add and use the MachineThumbnailDrawer class, allowing to draw a thumbnail on any Cairo context — hence on a GdkPixbuf or a widget — and with a given style and state. The MachineThumbnail and MachineThumbnailer classes used it to draw.
3. • Problem: MachineThumbnail have different behaviours depending on its states, while MachineThumbnailer always draw with the same style.
   • Solution: Use the same style for MachineThumbnail, whatever its state is.
4. • Problem: We now have two objects with a really close behaviour now, it may be simpler to only use one.
   • Solution: Make MachineThumbnailer customizable enough to be able to render pixbufs for both thumbnails, and make the list view's thumbnail a simple GtkImage.
5. • Problem: The list view thumbnail's spinner make the whole thumbnail spin now!
   • Solution: Use a proper GtkSpinner and switch between it and the real thumbnail when needed.

Conclusion

This feature have been really interesting to implement, it improved my understanding of what behaviours are good to have when introducing new code, and even if I still struggle to write really good commit messages, I feel like I nonetheless got better at it.

I also learned an awful lot about GTK+: I learned:

• how to use GListModel,
• how to use GtkListBox,
• how to use GtkFlowBox,
• how to implement custom spinners,
• how to theme a widget with CSS,
• how to use the widget states,
• and so many more!

Writing a custom spinner

What are spinners

A spinner is a widget in charge of displaying some indefinite amount of activity via a spinning circle-ish image. They use de "spinner" style class and are visible when the "active" state flag is set.

Turning a widget into a spinner

Turning a widget into a spinner is pretty simple, just add the "spinner" style class to the widget's style context! But now your widget is probably invisible, and that's normal: as said just before, spinners are drawn only if they have the "active" state flag on, just set your widget's state flags and you're done!

Now, depending on the widget you make spin you may have very different results. If your widget is a GtkImage, it will start spinning as if it was a spinner itself, funky results (and vomit) guaranteed! All the other widgets I tested (GtkLabel, GtkBox, …) don't change (they are visible and they don't spin).

If you want to render a spinner on an existing widget, you'll have to subclass it and to override its gtk_widget_draw() method to draw it and then render the spinner with gtk_render_activity().

If you want to render a spinner on an image, you'll unfortunately have to write a custom widget drawing the image and then the spinner on top of it.

Writing a custom spinner widget

Now that we know how to turn a widget into a spinner, we can build our very own custom spinner widgets!

I wrote a widget rendering a thumbnail for Boxes' list view. To do so:

• I inherited GtkDrawingArea,
• I overrode its gtk_widget_draw() method to draw it as I wanted,
• I added the "spinner" style class to the widget so it can render the spinner,
• I set the widget as active so it can be visible despite the "spinner" style class,
• I drew the base of my widget as I wanted it to be,
• I drew the spinner with gtk_render_activity() on top when I wanted it to be drawn.

Unfortunately you can't use the "active" state as a trigger without removing the "spinner" style class, hence it is simpler to just let them always on and add a custom trigger to draw the spinner itself or not.

Customizing the spinner

You can customize a spinner with CSS! As an exemple, if you want to slow down the spinner a bit, you can write the following "slow-spinner" class and add it to any spinner's style context:

.slow-spinner {
    animation-duration: 2s;
}

If you know or learn anything interesting about spinners, don't hesitate to share you knowledge in the comments! =)