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".

2017-10-21

GNOME

Ubuntu 17.10 was just released and the desktop environment now uses a slightly modified version of GNOME.

One style change in the user interface I observed previously is now very present in many applications, mostly applications that ship with GNOME: they now have a tall title bar with buttons. That user interface element is called the "header bar".

For common dialog boxes, the changes are automatic. Here is for example the color picker dialog used in PngOptimizer. On the left, it's on Ubuntu 17.04, and on the right, on Ubuntu 17.10.

I still wonder if this is a progress from a user experience point of view. As I see it, a dialog box offers interaction elements that are browsed from top to bottom. At the bottom, my sight, thread of thought and also my mouse cursor, pause a bit to let me decide if I should validate or cancel my choices. That is a smooth process when decision buttons are also at the bottom. Now, you need to go back to the top to validate/cancel your choices.

However, that kind of user interface is common on smartphones, so for a lot of people their brains are trained to find the validation button at the top. I also think the header bar looks nice and as I want to be a good desktop environment citizen, I decided to upgrade PngOptimizer to use these header bars. It would be hard to port a heavy menu-based user interface like Gimp to a header bar interface, but for PngOptimizer where I just have three menu items in a context menu, I think it is a good fit.

Here are the steps I see:

  • Update the Options dialog box. It is built from an XML file so I will do the change by editing it.
  • Update the main window with a "Clear" and "Options" button.
  • Move the "About" menu item to a new location proposed by GNOME: in the application menu located at the top of the screen.
  • Remove completely the context menu.
  • Update the About dialog. This one was not automatically changed like the color picker dialog, I don't know why.