Add CSS and Tabbed Layout to Panel

[localjo]

Since there are two different things being displayed by the devtools, it would make sense to have a tabbed layout in the panel to switch between the Page Context JSON and the Server Error Logs. Having a tabbed layout would be good for future additions to the devtools.

(Another possibility would be to surface the error logs into the console or panel sidebar. But that depends partially on the outcome of #1 and what format the error logs are surfaced in.)

Along with this issue, some CSS and UI icons should be added. I'm thinking of including the Blink source for this, to match the native look of the rest of the Chrome DevTools. The Facebook React DevTools do this, and Paul Irish recommends it, but there isn't much documentation about it.

[pushred]

The native styles have been getting awfully erratic! I think this version would probably feel the most at-home:

For the error logs there could be an interesting dynamic in providing a different log level in the main pane that summarizes everything and uses the sidebar panel for display debug level details. That'd match DOM and network request inspection behavior.

[pushred]

My first inclination was sidebar tabs actually, similar to the Timeline/Profiles tabs. They appear like WebKit holdovers but just noticed that this is how Ember handles tabs as well, with a much friendlier feel overall.

There's been a bit of protest over the removal of the tab bar icons, but with vertical constraints being a factor in so many laptops, etc. I can easily see why they did that. Sidebar tabs (OS X Finder offers more precedent) are really the compromise.

[localjo]

I was thinking sidebar tabs too. I think a layout similar to the Ember devtools would work well for the Solidus tools.

[localjo]

Updated to-do:

• match devtools style
• add tab icons
• add clear log button
• improve info/messages tab
• automatically switch to info tab on non-solidus pages

[pushred]

Some comments:

• Can't scroll in the inspector pane
• Resizing between the panes would be nice to have. Low priority, this is an irrational OCD impulse to control that width 😬

Going to open an issue or two for some other things I'm seeing.

[pushred]

Couple more:

• If the current site isn't a Solidus site, you should disable the Context/Logs tabs.
• Navigating away to a non-Solidus site isn't changing the Info tab, etc. Navigating to a Solidus site works as expected though. An undock + redock also does the trick.

[localjo]

• Disable Context/Logs Tabs on non-solidus pages.
• Add resizing to tabs/panels

[pushred]

How about choosing a font & color scheme consistent with the output of objects in the console?

[localjo]

@pushred Do you mean the font & color scheme for Inspector-JSON or for the server logs?

[pushred]

The inspector, haven't checked out the logs yet gotta get that Solidus branch going again with the site I'm working on. The font we specify for Inspector JSON (which was ripped out of the Storyteller editor) is just feeling really blurry in contrast to whatever Chrome is using when I'm switching between tabs.

[localjo]

@pushred I matched the Inspector-JSON styles to Chrome's default. I'm ready to merge this pull request if you agree.

[pushred]

All set! 👍