Debugger messages need more space for readability about virtual-dom HOT 8 CLOSED

This is the main reason we don't use the debugger very much at Humio. What messages are sent is often more interesting that the model IMO.

We have a very complex application where messages are wrapped deeply in e.g. (ProjectPage (SettingsSection (DropDownMsg (...
With the current layout of the message list, we can only see (ProjectPage (SettingsSection ... and pretty much all messages in the list will be identical:

For us it would be a lot more relevant to see the end of the message ropdownMsg (Select 1)) than the start.

I suggest that we make split the right side of the debugger horizontally and make the top part contain the message. It should be expandable just like the model.

Mockup:

from virtual-dom.

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

from virtual-dom.

One problem with the "click a message to see its full content" approach is that it doesn't let you scan messages to look for patterns or quickly find the one you're looking for. Instead you have to go through them one at a time.

Resizing is one way to address this.

Another would be to remove the height restriction, such that if they ran out of horizontal space their text could wrap around and the message would expand vertically to accommodate it. A downside of that approach is that if several consecutive messages wrap, it gets harder to spot patterns (such as "for some reason we keep alternating between SetDate and DatepickerMsg") because the beginnings and ends of the messages are no longer vertically adjacent.

from virtual-dom.

That's a good point, Richard. Maybe doing both would be helpful? Some messages can get pretty big, and it'd be good to be able to see what they contain in their entirety, but also being able to have an at-a-glance overview of the message patterns is important.

from virtual-dom.

Can you share some examples of particular messages you have? How long are they? What kind of values do they contain? What are the values you are interested in?

from virtual-dom.

Here's some messages from my apps:
https://github.com/prikhi/bodyweight-client/blob/master/src/Messages.elm
https://github.com/Southern-Exposure-Seed-Exchange/Order-Manager-Prototypes/blob/master/elm/src/Messages.elm
https://github.com/Southern-Exposure-Seed-Exchange/Order-Manager-Prototypes/blob/master/elm/src/Products/Messages.elm

I think the longest one looks like this:

RoutineFormChange (SectionFormMsg Int (SectionExerciseFormMsg Int (ChangeExercise Int ExerciseId)))

Although the one's with the most content are my Fetch-completed messages,
sometimes they have lists w/ a thousand elements or so.

It would be useful to have a search field that would filter the shown messages,
so I could enter something like SectionFormMsg 0 to get all the messages
related to the first section form.

If full messages were shown above the model, it would be nice to be able to hit
the up/down keys to scroll through the messages. Then I could keep an eye on
the full message while flipping through each message to find the one I want.
Hovering over shortened messages is OK, but it takes a second of hovering over
each message to see the text, which gets annoying fast.

Resizing the sidebar works for me as well, but I have the debugger open in a
large window so I'd be able to see my long messages as well, not sure of what
other people are doing.

Also, highlighting diffs between a message's updated model & the one before it
would make it much easier to deal with large models(should I make that a new
issue?).

from virtual-dom.

Same issue reported here https://github.com/elm-lang/core/issues/763#issuecomment-264674403 I certainly have some Messages that are nest at least 4 deep, and then some that contain a lot of json.

from virtual-dom.

Tracking in #98. Thanks for the report!

from virtual-dom.