Add collapse button to devtools

[marthacryan]

User facing changes

• Adds a collapse / expand button that uses local storage for collapse state. It has the same little rotating animation as the old dev tools!
  

Code changes

• Changes the DebugMenu from a class component to functional component (it made using state easier and we're trying to move components to that anyway).

[BSd3v]

What happens if there are errors when it is collapsed?

[marthacryan]

@BSd3v Good question! Currently what happens is the list of errors pop up either way, and it doesn't affect the collapse state of the devtools menu. So if it's collapsed and there's an error, you see this at the bottom right:

@ndrezn Any thoughts on this? I know we discussed having a little red error count over the collapse button but I didn't remember if we had a decision there.

This did actually help me catch an edge case though where if you dismiss the error dialog and the devtools are collapsed, nothing happens when you get an error.

[BSd3v]

This is where this would be handy. 😉

#2337

[BSd3v]

While at it, could you also make it so we can download the errors. XD

[ndrezn]

Good ideas, but let's not let scope creep here! We came up with plenty of others during the devtools redesign 😉 When there is an error/version update but the devtools are minimized it will show a red notification dot with no number. @jeromevaldez is on design for that.

[BSd3v]

Did you try fit-content? It might work as long as the internal components use a width pre-defined

[marthacryan]

Just tried that and it didn't work. It's tricky to add the sliding behavior! Looks like there's this experimental css feature that could be good once it has higher adoption, but from what I've seen there aren't amazing options other than the max-width hard-coding for now.

[T4rk1n]

Looks good, nice refactor to a functional component 💃