Expose "key" in the sidebar
quantizor opened this issue · 10 comments
You can see it in the element tree but when you click on an element it doesn't appear in the right sidebar. It'd be awesome if it was copiable too.
The space on the right hand panel is pretty valuable. Anything we add competes for screen real estate with other things.
Legacy DevTools used to show key in the top of the panel, but that's the most precious space. I don't really think key is important enough to go there. We could inline it within props but that feels wrong too, since (at least for the time being) it is not a prop.
Why do you think it needs to be there?
I regularly refer to it when debugging things like search results in some of our product views that have long key names and I'm trying to see something toward the end of the key. I'd say put it at the bottom of list of things in the panel if you want to de-emphasize it but it's currently not accessible at all.
I regularly refer to it when debugging things like search results in some of our product views that have long key names and I'm trying to see something toward the end of the key.
It's in the Components tree though, where the search result selection is. Why isn't that sufficient?
I'd say put it at the bottom of list of things in the panel
Putting the key at the bottom seems like weird placement to me.
Putting the key at the bottom seems like weird placement to me.
Just trying to offer a solution since you said the real estate is precious.
It's in the Components tree though, where the search result selection is. Why isn't that sufficient?
If it's a long key it gets ellipsed and you can't double click on it to copy/inspect it.
Just trying to offer a solution since you said the real estate is precious.
Understood! 😄 I just don't think that's a great alternative in this case.
If it's a long key it gets ellipsed and you can't double click on it to copy/inspect it.
You can hover over it to see the full value (via a tooltip). How often do you actually need to copy/paste it?
You can hover over it to see the full value (via a tooltip). How often do you actually need to copy/paste it?
Thrice in the past week 😆 In my case I'm debugging a key that's actually 4 UUIDs concatenated together so it's a little unwieldy.
Maybe a compromise would be to just make the value of key text-selectable, so you could double click it to select the value (in addition to hovering to see a key)
The downside here is that we'd have to give up our nifty (JavaScript-powered) middle text truncation but... maybe that's okay?
What do you think
That makes sense to me and matches up nicely to how the normal element inspector works 👍
Thanks Brian!