Skip to content

Add visual layout debugging features #2856

Open
@hyuri

Description

@hyuri

What is the problem or limitation you are having?

Currently, we don't have an easy way to visualize and debut our layouts. So the only way to do that is by changing the background colors of different boxes, buttons and labels. That way we can visually see how the widgets are relating to each other. But it's manual, messy and tedious.

Describe the solution you'd like

Add a sort of debug "layout wireframes" property to App, that, when True, renders all widgets with a bounding box/border around them.

Going even further, another debug property can be added: "layout depth", that turns off all colors and instead assigns a different shade of gray to each widget based on its depth in the hierarchy. The main window black, with inner widgets in progressively lighter shades of gray, all the way to the top elements like buttons and labels.

So we would be able to easily visualize boxes inside of boxes and how they relate to each other.

That way, we have an easy way of visualizing what's going on in the layout and can spot bugs — especially some that are hard to catch unless you visualize how the widgets are glueing together.

Describe alternatives you've considered

None

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew features, or improvements to existing features.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions