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?

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

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.

@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.

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

@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 :)

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)?

@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

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

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

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

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 can you give me a hint of where to start looking for the API?

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

Posted original request for LayoutInfo changes, includes links to my poor man’s inspector implementations 🙂 https://issuetracker.google.com/issues/235373410