nit: reduce GtkColumnListView spacing so tree branches visually connect

[schnommus]

This is a very minor look-and-feel thing. Looking for opinions, happy to help out (e.g. PR) if you think it would be useful.

A normal packetry session might look like this:

By switching to a bitmap monospace font (Terminus here) and reducing the vertical padding, the tree connections between rows meet up:

There are still some horizontal tree misalignments above (which would need to be fixed). It would also make sense to only reduce padding in the central ListView and not everywhere in the whole application of course (this is happening as I'm applying the style to every element using the GTK debugger, however is just for the sake of example)

Does this sound like a reasonable change or are there some plan to move to different connector icons? (i.e graphical, non-ASCII)

[martinling]

Hi @schnommus,

Yes, it would be nice if we could get those to join up nicely.

In the longer term, I'd been thinking we'd substitute each of those text characters with graphical elements, so that we have more control over their appearance. But the rendering is always going to have to work on a per-row basis, so we'll need to eliminate the padding between rows either way.

The easiest way to do it is probably to eliminate all the vertical padding which gets between each rows' label containing the connecting lines, and then increase the font size of that label such that it ends up defining the overall height of the row, whilst leaving the rest of the content at the same size and spacing as it is now.

Even if we eventually implement a graphical version, I'd want to keep the text version behind the scenes. It's good for outputting the UI contents to a file for test purposes, and we might want a TUI frontend at some point in the future too.

[martinling]

By the way - I notice you moved the expander widgets to the left of the connecting lines too.

We used to have it that way, but we changed it to keep the expanders on the right, because in a complex capture the connections can get quite complicated, which would put the expanders a long way from the things they act on:

[schnommus]

Hi @martinling,

Indeed as you suggested increasing the font size only in the connector cell makes this easier to achieve. Unfortunately I was not able to get the padding to exactly zero by modifying the various component properties, and had to apply a CSS rule to the label instead with a negative margin to get truly 'no' padding.

Now it's much closer to what I was imagining (also padded down the expanders so they are vertically centered):

Patch to get the above result is here (requires Terminus already installed): main...schnommus:packetry:seb/css-terminus

This is enough to make my eyes happy, but probably a fair bit more work would be needed to have the padding/sizing work correctly across all possible font/DPI settings.

Another thing I was experimenting with was replacing the ○ with an ╭, so the expander dropdowns smoothly open:

Doing this properly would require the connector to know whether an expander is open or closed (to choose a circle or an arc), but visually it feels a bit less cluttered. All a matter of opinion, just sharing some notes in case they are useful 😄

[martinling]

Making the connectors vary with the expanded status is fairly straightforward.

Personally I do like the curved corners - I think I had a version which used them at some point. But if you're going to curve the top corners, please curve the bottom ones too! 😁

See this commit on top of your branch: martinling@04aefe4