Auto border UI components when in dev

[arichiardi]

I actually found this very useful hack in Android.

You can add a border to your UI components/containers so that they show their size/position.

In re-com you already have the border border component and it would be great to wrap each and every other UI element in a in when in dev mode.

Another maybe simpler idea is to have a with-border macro that wraps when you need it. This last idea is almost already in place here :+1:

Great tool by the way, even if flexbox sometimes makes me crazy.

[mike-thompson-day8]

There's limited capability already there.

Try doing this: (set! re-com.box/debug true)

That adds coloured borders around all v-box, h-box, gap etc. Can be useful.

[arichiardi]

Cool stuff, exactly what I need it :+1:

[mike-thompson-day8]

We need to add some docs around this.

[arichiardi]

:+1:

[Gregg8]

Might review the colours at the same time. Just had another look at it. Was only put in while making the box module (and needing to debug it...yes, Flexbox drives us all mad at times), but glad others might find it useful. Will document it for the next release.

[arichiardi]

Thanks! In Android the color is red, but I also find useful to differentiate (random among say 15?). A macro would have been the best as you can "pass through" your object, prepending it..kind of like trace for clojure functions, which prints and returns the unmodified result of the function up the call stack.

[Gregg8]

You said you your macro was "almost in place", so feel free to pass it along when you're happy with it :-)

[arichiardi]

True :smile: I will! No ETA though as I am a bit swamped..

[mike-thompson-day8]

This issue is rather old, so I'm going to close. I have recently added a note in the documentation regarding (set! re-com.box/debug true)