Beautify JSON

[bkniffler]

Hey, how about beautifying the JSON and using <pre> instead of <div> for better styling?

[danielkcz]

This might be a quite long for bigger states and frequent actions being dispatched. It might be much more interesting to have a kind of collapsing in there instead of showing everything it all by default. But I guess that will be covered in more advanced monitors as they emerge for sure.

[gaearon]

I'm inclined to merge this until somebody implements collapsing.
Any objections?

[gaearon]

For bigger states, select prop helps to focus on a particular part. <DevTools select={state => state.todos} />

[gaearon]

I played with it some more.. I'm not sure this is very helpful.
Deeply nested JSON is still painful to view.

I have another idea which I'll post shortly.
(Thanks for effort though!)

[bkniffler]

How about this? A fresh timeline and horizontal scrolling for better JSON display?
Uses bootstrap, fontawesome, and http://bootsnipp.com/snippets/featured/timeline-responsive

[calesce]

I agree that a drop down (similar to the Chrome extension, JSON Formatter) would be most helpful.

[bkniffler]

Though its even less space horizontally now..

[gaearon]

Some thoughts here: #38.
Maybe these should be two separate monitors.

[bkniffler]

I imagine your proposition would be the best solution, though its a bit more complex to implement. The current monitor as well as this proposition here are merely temporary solutions.

[bkniffler]

I think I like the last commit best, what do you think? Until the dock-monitor is done, we can still polish the simple-monitor. Or would you my changes to live as a fork, as a seperate monitor?

[gaearon]

Thank you! Let's hear what others have to say. With a bit of design polish I think this is a good temporary solution.

[bkniffler]

This is what it looks like now, horizontally scrollable, separately expandable action and state using <pre/> and a disable/enable label:

I'll leave it like that for now, waiting for feedback.

[danielkcz]

@bkniffler I love it! As a temporary solution it's definitely very good. +1 for merge

[bkniffler]

[gaearon]

Hmm, here's how I see TodoMVC example in your branch:

Another problem is lots of linting errors:

[gaearon]

Thanks for your effort! In the end we went with #48 because it also had a tree inspector.

[bkniffler]

Ah, no worries, it looks a lot better!