2017-10-29

Revamping PngOptimizer for GNOME: Options dialog box

I am currently revamping PngOptimizer GUI Linux version in order to follow GNOME design style.

I started with the "Options" dialog box, which looks like this on Ubuntu 17.10:

Unfortunately, without doing anything, I can spot two problems in comparison with Ubuntu 17.04: the dialog box title is wrong, it should be "Options" instead of "pngoptimizer", and there is now a strange padding at the bottom of the dialog box. So at the same time I tried to modernize that dialog box, I also wanted to find workarounds for theses problems.

In GTK+, you can create a dialog box programmatically, but you can also write an XML file describing the content of your dialog box.

For the Options dialog box, I chose to use an XML file. To avoid too many headaches, I used a nice visual design tool named Glade.

The first step to convert my dialog box to the new style consists in enabling the header-bar.

I did not find anything in Glade to do that, but fortunately, I got the response after some Web search. That can be done by manually editing the top of the XML file:

<?xml version="1.0" encoding="UTF-8">
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.12"/>
  <object class="GtkDialog" id="dialog">
    <property name="use-header-bar">1</property> <!-- here -->

Then I wanted to edit the header-bar buttons, but I had to manually edit the XML file again. Hopefully Glade will support header-bar editing in the future. By chance, this is well documented on GNOME wiki.

I followed the guideline and moved the Ok/Cancel buttons declarations at the top of the document:

<object class="GtkDialog" id="dialog">
...
  <child type="action">
    <object class="GtkButton" id="button_cancel">
      <property name="label">gtk-cancel</property>
      ...
    </object>
  </child>

  <child type="action">
    <object class="GtkButton" id="button_ok">
      <property name="label">gtk-ok</property>
      ...
    </object>
  </child>

Here is the result:

Nice! And I got my title back! I start thinking that there is an actual bug somewhere in GNOME or GTK+ when the header-bar is disabled.

However, this result is not exactly what I expected. With other GNOME applications, the Ok/Cancel buttons are positioned near the borders of the box, with the title in the middle.

To get that wanted style, I had to add a specific XML declaration after the Ok/Cancel buttons declarations:

<action-widgets>
  <action-widget response="ok">button_ok</action-widget>
  <action-widget response="cancel">button_cancel</action-widget>
</action-widgets>

Here is the result:

That looks better. But on other dialog boxes, the button to validate the dialog box is green. How to make my button green? The solution is just to add a default attribute in the action-widget element:

<action-widget response="ok" default="true">button_ok</action-widget>

Which leads to that nice green button:

Using and header-bar fixed the missing title, but did not fix that strange padding:

When I attempted to resize the dialog box, its actual size would suddenly jump to the expected size. So I suspected that some kind of internal dialog box geometry recomputation was missing. I tried calling manually from the C++ code several GTK+ functions related to the geometry of the dialog box.

After a frustrating retry & error process, I finally found a workaround: set a default-height to 0. The dialog box won't shrink to 0 fortunately, but it has the effect of triggering the right size computation. The default height can be directly set from the XML instead of the C/C++ code:

<?xml version="1.0" encoding="UTF-8">
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.12"/>
  <object class="GtkDialog" id="dialog">
    <property name="use-header-bar">1</property>
    <property name="default-height">0</property> <!-- here -->

Here the final result:

That's a nice victory :) Now I could just concentrate on some fine tuning. For example, changing the "ok" button (here "validate" in french) to "apply", maybe updating the margins or rename the dialog box from "Options" to "Preferences" as done in other GNOME software.

The next steps of the revamping will be about the About dialog box and the context menu that I want to promote as an "application menu".