Identifying a drawing performance problem

A story of moldable development

Tudor Girba
feenk
3 min readFeb 13, 2020

--

We worked on a way to explain that the need for moldability is pervasive in software development, and we came up with this treemap showing all classes from Glamorous Toolkit grouped in packaged and highlighting in blue the classes that define at least one custom view, and in green those that define examples.

A treemap.

This worked nicely. However, we noticed that the user interface got significantly slower when the treemap was displayed. Indeed, a treemap entails potentially many elements, so we expected it to be slow to show the first time, but we did not expect it to slow the whole interface after it was displayed. At further inspection, we learnt that the reason was that caching was not enabled. This was particularly relevant when we were in the Inspector. To remedy this problem, we made the whole inspector page cache its contents and things improved considerably.

Of course, we were not quite happy yet. We wanted to also see how the change looks on the inside. So, we extended the children view of an element with previews. In the picture below we see an inspector showing the live preview of another inspector open on a treemap. On the right, we see the same inspected inspector, only this time showing the children view: indeed the element GtInspectorPageElement has the cache enabled.

On the left we have an inspector showing the live preview of another inspector displaying a treemap. On the right we see the same inspected inspector, but this time looking at the children view.

So, now we could see the effect we added in code, and this felt much better. And, just like children in a candy store, we even extended the preview with a drop down that can see the actual size of the element in the tree.

And as we were playing with the new shiny toy, we noticed something intriguing. The inspector has the ability of expanding a pane to occupy the entire space (as opposed to only have the pane occupy half the space, as in the first screenshot). This is accommodated through an overlay element that we over-impose over the whole scene.

When we looked closer at the maximized pane in the inspector (notice below that the button on the top left is expanded: it shows a instead of a + like above), we saw that while the GtInspectorPageElement did have the cache enabled, the actual treemap was not under it, but next to it in the rendering tree. In other words, the cache would not apply to the case when the pane would be maximized.

When an inspector pane is maximized, the way we enabled the cache does not cover it.

This serendipity would simply not be possible without the explicit work on custom tools. And it would not be possible without the playfulness that these custom tools enable.

--

--

Tudor Girba
feenk
Editor for

CEO | Software Environmentalist @feenkcom. Making software systems explainable.