firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

[Console] Switch between two different object representation #122

Open nchevobbe opened 4 years ago

nchevobbe commented 4 years ago

In the console, for some type of objects, we don't render them as regular objects, but with what I'll call here a customFormat.

The main example at the moment is Error, for which we only display the error type, the message and the stacktrace in a nice way for the user

image

In the future, we might have Elements represented as a DOM tree, which will be another custom format.


For those objects, users might still want to be able to switch between the customFormat view and the "regular" one (for example, they might want to inspect the properties of the object).

It would be nice to have a way in the UI to switch from one representation to the other.


@violasong suggested using a "Show properties" toggle placed near the object. I mocked this quickly:

image

I wasn't sure of where to place the toggle, so I put it after the message, before the stacktrace. This could look a bit weird in some situation (when we have mutliple error objects, when the error message has line breaks, …)


@fvsch played with some icons that could be displayed next to the object as well: image


Let's discuss :)