Warning on javascript or feature not supported

[NiedziolkaMichal]

This PR changes how interactive examples are shown, when java script is disabled or shown feature is not supported.

Currently, part of the example is shown as plain text. I remember there was reported issue about scrollbar-width in chrome shown like that, but I couldn't find it.

Attached changes makes window look like this:

--background-warning: rgba(216, 64, 0, 0.1); contains "--background-warning" value copied from yari.
.editor-container.hidden is added, because simple .hidden selector has too low specificity.
Headers were added back, because whole dialog looks better with them.

I didn't change how JavaScript and WebAssembly are shown, because they have intentional fallback to plain text which looks quite ok.

@wbamberg

[wbamberg]

I won't review the code here but I'm +1 on the idea. I wish we could simply hide the editor in these cases (mdn/interactive-examples#532) but since we can't, this is better than what we have now.

Also though, I think we should treat it as a content bug when this happens in Chrome or Firefox (or Safari, probably).

[NiedziolkaMichal]

Yes it would be better to hide the editor. Although user might see a warning and then try different browser to see the example.

[caugner]

Please rebase your branch to resolve the merge conflict, and make sure that all of your commits are signed.

(Please see the documentation about signed commits and how to sign yours on GitHub.)

[NiedziolkaMichal]

@caugner Current state is ok? I used merge to resolve common.css conflict and signed it.

[caugner]

Current state is ok?

@NiedziolkaMichal Unfortunately there is a new merge conflict in editor/tmpl/live-tabbed-tmpl.html. 😕

[NiedziolkaMichal]

@caugner That was expected. Everything should be fine now.
Could you check #763 later too?

[caugner]

LGTM, just one possible nit.

[caugner]

LGTM, thank you! 🎉