Improved design and tree for devtools

[dzannotti]

• Improved the overall design
• Rollback/sweep/commit now stands on the top of devtools
• You can now pass any base16 theme name prop or your own base16 colors to <LogMonitor/> (defaulting to ocean)
• Payload and state are expandable tree with variable type coloring
• States automatically highlights the differences between current and previous state with a subtle red background

Here is a screenshot of what it looks like using ocean's theme
Original PR:

With changes:

[gaearon]

Some screenshots would be nice ;-)

[danielkcz]

@gaearon Just wanted to say the same thing, you were faster. Might just add that there is another try to make it look better at #36. I suppose that these two are not compatible :)

[gaearon]

I think it's a bit more ambitious than #36

[danielkcz]

Well I am simply amazed. Definitely step forward compared to the current simple thing :) Although doesn't make much sense to me to display 3 Items for an simple object. It looks somewhat confusing to me.

Also it might be nice to have an option to just collapse whole action (perhaps even by default) instead of just disabling it.

Another neat idea that just struck me is about displaying time of an action since we have it in there now.

[dzannotti]

Updated description of features in original post

[dzannotti]

@FredyC 3 items is displayed only when the tree is not expanded (useful to know how many array items or object keys you have in state)

[gaearon]

I want some people who use DevTools to give it a go on a real project before merging and let us know any point points. Any volunteers?

[danielkcz]

@dzannotti Yeah I am not sure if knowing number of keys is useful anywhere :) Perhaps you can change that label to display "3 keys" instead? This way it's easily confused with array and adds more complexity your brains has to pay attention to.

[dzannotti]

Collapsing the whole action is something i did think about today, but the ui to do that would require additional things (ie fontawesome?) which would complicate the distribution of the package, unsure about this one.
Regading the time, it doesn't makes much sense since you can replay your action, perhaps would be useful to time each reducer instead - probably related to #45

[nicinabox]

Needs a bit more work, but this was a good first pass I think.

[dzannotti]

+1 on @nicinabox theme used as default and his tweaking

[gaearon]

Anything else here? I can't wait to merge. :-)

[gaearon]

Awesome job. I'm so grateful to you @dzannotti @nicinabox.

[iamdustan]

👏👏 as are we all. This is awesome.

[danielkcz]

Looks like I am too late in here. Seems you forgot about that support for Immutable. I didn't actually tried, I just don't see where it's taken care of. Might be just looking at wrong places, in that case nevermind :) And good job, looks great (at least from the picture)

[gaearon]

Out in 1.0

[gaearon]

Please file an issue for supporting Immutable.

[nicinabox]

Thanks guys! I added #52 to continue polishing. If you spot issues just give a shout.