Hey folks :slightly_smiling_face: Back to some cod...

# compose-desktop

[orangy]

Hey folks 🙂 Back to some coding with compose, so nice to do it again! This time I’ve got tired of building layouts with trial and error and wanted to visualize what do I actually get on screen without messing with preview widgets and such. So I thought, what if I can mimic the browser inspector where you point somewhere and relevant element is highlighted, along with its modifiers? Would be cool, right? So I did it.

Unfortunately, this requires quite a bit of reflection to pick into the details of LayoutNode tree and thus very fragile. However, almost everything is already there in the public API, except 3 things:
• ability to get root LayoutInfo , e.g. from Window
• ability to get children of said LayoutInfo , and since node and info is the same instance, just expose children from node into the info interface
• ability to get the outer coordinates from LayoutInfo, not affected by modifiers. coordinates property is “content area” after paddings and such, and to properly hit-test and highlight the node I need outer coordinates (it’s all there in outerLayoutNodeWrapper, just needs to be exposed)
If we had this, we could build very nice tooling for ourselves. WDYT? Worth creating an issue, or is it too much into inner kitchen horrors?

[shikasd]

I think layout inspector in Android studio should have somewhat similar functionality, maybe its integration will provide you with some hooks you need?
Not familiar with it myself, but probably it exists somewhere in the compose codebase :)

Otherwise, I think this exploration is worth to create an issue, both in the context of desktop and other platforms

[Landry Norris]

It would also be really good for learning Compose. There’s a lot of compiler magic, and it would be nice to be able to see the actual tree Compose UI uses in the debugger.

[orangy]

@shikasd I think layout inspector in AS has all hooks to work with ComposeScene directly, but I really want to inspect the running application. So I have it intercept Cmd+Alt+MouseMove and highlight the details like on the screenshot.

All the data is there, LayoutInfo is public API already, 3 properties are not breaking backwards compatibility in any way and are just getters of internal already existing fields as a different type (to not expose internals). It should be very easy to implement.

[orangy]

@Landry Norris compiler magic is still hidden in the Poor Man’s Inspector like this. You only get the resulting layout boxes along with modifiers. But it is already a very big deal when trying to understand where this extra padding came from or why it is not responding to hover (because you forgot fillMaxWidth), and so on

[Ruckus]

This would be nice to have. Scenic View was an excellent tool for JavaFX, and this sounds like it would fulfill the same purpose.

[orangy]

@Ruckus unfortunately there is not enough data for full Scenic View properties window – when layout is composed names of functions that produced nodes are lost, for example. Or maybe I didn’t find them yet in the ever deep layout system :)

[Ruckus]

Ah, I see. Still, it would be useful. And if things APIs for function names added in the future, it would only get better 🙂.
For the modifiers, does it only handle a common subset of modifiers, or is it somehow magic enough to give useful information about any modifier (even custom)?

[orangy]

@Ruckus any modifier that is good enough to provide InspectorValueInfo , which is pretty standard thing to convey debug info. See e.g. Modifier.padding . I believe all standard modifiers do that, and when I author a custom modifier, I include that too

[orangy]

Ah, and for now I only include `LayoutModifier`s, because that’s what’s important for me, but one can augment the code do whatever they like

[Zach Klippenstein (he/him) [MOD]]

@Chris Sinco [G] Any idea if we couldn’t reuse the Layout Inspector hooks for CfD?

[james]

love this idea, it would be a real multiplier on UI development

[Chris Sinco [G]]

Not sure. That'd be a question for @amaury or @nosuid

[shikasd]

You could also combine it with Composition data (I believe that's what AS inspector does?) and present layout tree alongside with logical composables, which is somewhat closer to what React/Vue component tree does

[shikasd]

@orangy to be clear, I meant reusing integration APIs from the Compose side to implement a custom inspector with desired behavior, not the other way around :)

[orangy]

@shikasd can you give me a hint of where to start looking for the API?

[shikasd]

Probably around here: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-inspection/src/main/java/androidx/compose/ui/inspection/

I suspect it is not multiplatform at the moment, so you might need to fork it a little bit though :)
Don't have much more information about this package though, just looked it up in the codebase

[orangy]

Posted original request for LayoutInfo changes, includes links to my poor man’s inspector implementations 🙂

https://issuetracker.google.com/issues/235373410