Improve scannability of the right side panel

[b44rd]

Proposing a simple solution for enhancing the readability of the different parts within the right side panel. Attached are previews of how this will look inside both standard and dark theme.

[posva]

Personally, I really like how it looks. I think we should change the green for the panel title background, especially in dark mode, it's way too catchy for the eye. Maybe a grey color in both themes will be enough.
What do you think @yyx990803

[b44rd]

Glad to hear! I agree with you that the green color is a bit to flashy. Here´s two screenshots of a local copy where the green color is replaced with grey tones. It might indeed work out for the better. 👍

[b44rd]

@yyx990803 Thoughts on this one?

[yyx990803]

I actually like the green headers in bright mode. Gray headers in bright mode makes it feel like those boxes are "disabled" in some way. Gray headers does look much better in dark mode.

My only nitpick would be: in bright mode, raising the brightness of the gray background a bit more and add a subtle drop shadow for each box.

[b44rd]

The pull request is now updated. I´ve now made the header background green inside light mode, and grey inside dark mode, which seem to work really well. The light mode has also got a subtile drop shadow now. Had some trouble making the background of the right column fit to the box inside light mode, so defined some background inside ScrollPane.vue and SplitPane.vue as well in order to avoid adding css hacks here.

[b44rd]

@posva @yyx990803 Will this one be merged anytime soon? Thinking about creating a pull request that adds a options control at the right side of each header as well. Useful features inside this can be collapse all/expand all and order keys (default/a-z/z-a).

[yyx990803]

@b44rd sorry for letting this sit - was busy with the release of 2.5. However, taking another look after a while makes me reconsider the change. I like the idea of making the headers of each section more prominent, but the background + cards feels a bit inconsistent with the style of the rest of the devtools.

[b44rd]

@yyx990803 Yeah, you might be right about that. The dark version works a bit better than the light version, I think. Was mainly chosing cards since it made the contents group better. It also allow the headers to later be extended with filtering options, such as ordering options, expand all/collapse all.

If you have any suggestions to improve the design though, let me know, and I´ll see what I can do. 👍

[Akryum]

See #477

[b44rd]

Closing PR, as #477 is a much better solution. 👍