Debugger messages need more space for readability

[mrmurphy]

Once messages get a bit more complex than messages from simple examples, the restricted size of the sidebar makes their content unreadable.

Here's a screenshot of the debugger running in my app:

All those "MakeRequest" and "SaveAfter" messages have important content that, at the moment, I can't see unless I open the developer tools and inspect that HTML element, like so:

One approach to solving this issue might be making the sidebar resizable, as did @rtfeldman in #46.

Another idea, which could possibly offer better readability, would be inserting the selected message's information in the right-hand pane above the model. So each time I click on a message, I see that message's content displayed on the right hand side, and the state of the model at the time the message was intercepted.

[process-bot]

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.

[rtfeldman]

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.

[mrmurphy]

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.

[evancz]

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?

[prikhi]

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

[simonh1000]

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.

[evancz]

Tracking in #98. Thanks for the report!

[anagrius]

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: