improvement: add header to webxdc dev tools element

[WofWca]

So that it's clear that it's not a part of the actual app. It confused me a little when I was just starting with webxdc.

[r10s]

i understand the idea of marking the two buttons somehow as not being part of the app, however, the current approach takes too much space (it is already before annoying sometimes and you have to resize the window to be able to "click through").

i would make the control smaller, not larger. otherwise it helps one time, and then annoys all other times :)

also, it does not look as good as before.

so, maybe better reword the "Add Peer" so that it is clearer that it is a testing tool? sth. as "+Test Peer"?

and/or, we can also add a tooltip - there we could also say clearly, that these tools are not part of the regular app.

[WofWca]

takes too much space

How about make it move-able and/or hide-able, like eruda.js

[r10s]

sure, movable, collapsable etc. would be nice as well, but also another effort. and i still think, things should be as small as possible, a large, permanent title would still be annoying most of the time

what about the idea of +Test Peer - instead of Add Peer - that would make clearer, that the buttons are a part of a test tool and not a part of the final app and solve the initial issue with close-to-zero effort

[WofWca]

any ideas how to make "Clear Storage" smaller?

"Reset" - and it's also clearer.

[r10s]

indeed, "Clear storage" also reloads the page.

so +Peer and Reset - nice!

[r10s]

did a successor: https://github.com/webxdc/hello/pull/55