UI Visual Improvements

[iw-an]

Previously the only way to know a field's type was to hover over its field number. I have placed the field type on the right side of the row so its easier to see.

I have also indicated if a field is a sub message as well.

[konsumer]

I did this initially, but it takes up a lot of room in the UI, especially if you have complicated messages. Even at text-xs it seems too big to me. This area is also cramped for things like render-selection (and naming as you mentioned in #14 .) If we combined all three: button (that pops up edit modal) that shows type, I think it might all fit better.

Another idea I tried, but decided against, was absolute-position and reduced opacity, so it looks a bit like an overlay on the tree that doesn't mess up the other text. Maybe we could revisit that, but it didn't look right to me.

Maybe it's fine. I just tested with the deepest test proto I have, and everything fits, so it might be totally ok.

Another idea would be to expand the color idea (which roughly represent wire type) and use icons? this way, it takes up less room, but you can see what is there, and hover if you don't know what "blue with string icon" means, or whatever.

Either way, the colors could use some adjustment. I think I just picked the default intent-color classes (so they look ok in every theme) in no particular order, off the top of my head, but they could probly be dialed in a bit more.

[iw-an]

I did this initially, but it takes up a lot of room in the UI, especially if you have complicated messages. Even at text-xs it seems too big to me. This area is also cramped for things like render-selection (and naming as you mentioned in #14 .) If we combined all three: button (that pops up edit modal) that shows type, I think it might all fit better.

Another idea I tried, but decided against, was absolute-position and reduced opacity, so it looks a bit like an overlay on the tree that doesn't mess up the other text. Maybe we could revisit that, but it didn't look right to me.

Maybe it's fine. I just tested with the deepest test proto I have, and everything fits, so it might be totally ok.

Another idea would be to expand the color idea (which roughly represent wire type) and use icons? this way, it takes up less room, but you can see what is there, and hover if you don't know what "blue with string icon" means, or whatever.

Either way, the colors could use some adjustment. I think I just picked the default intent-color classes (so they look ok in every theme) in no particular order, off the top of my head, but they could probly be dialed in a bit more.

I think it's actually possible for it to stay the same, large values are never going to nicely fit in the screen anyway. I think a good alternative here is that we line-clamp-1/2 and when a value is clicked it copies the value to the clipboard so you can bring it into a text/hex editor etc.

Maybe we have different workloads here but the majority of values I see are not so big and if a value was huge I'd want to take it to somewhere else anyway for further investigation

[konsumer]

the majority of values I see are not so big and if a value was huge I'd want to take it to somewhere else anyway for further investigation

Yeh, and it's possible to split off any message for deeper analysis, here, too (take bytes and insert in the hex-input.) I had a problem with this before, in testing, but looking at it on a regular size monitor, with real semi-complex proto, it seems to fit ok. I do a thing where I pre-fold the messages, so it's not as overwhelming when it first loads (generally, I am trying to dig into a specific branch) so it's not as much of a problem, maybe.

How about this, as a merging of these ideas?:

• we show the type and format text-xs neutral-content/50 (semi-opaque) and line-clamp-1/2 to ensure it never overflows, and visually is less important than the field numbers
• we make the field-numbers clickable buttons to pop a modal for other settings (render-type, name) but also it could show more detailed info

[iw-an]

@konsumer Sounds good to me

[konsumer]

I still think we should maybe pick some nice theme-colors for each wire-type, and keep the title on hover (maybe only wire-type shows on screen, but the title shows that + render-type.)

See this for info on good choices. These will work in any theme, so they are a good general way to do indicators.

[konsumer]

I will merge this, and implement those other ideas (maybe save the modal thing and colors for later, since I am busy with lib stuff.)

[konsumer]

Looks a bit wonky if small, but I agree, that is ok, and for most things, it's probly fine.

line-clamp-1/2 didn't seem to work there, so I just dropped it, I think it'll be fine.