Fix webview theme styles

[olexii4]

What it does

Add material colors into webviews.

What issues does this PR fix or reference?

#4179

How to test

Try to use this 'asciidoctor-vscode' extension
https://marketplace.visualstudio.com/items?itemName=joaompinto.asciidoctor-vscode.
Check all themes.

[azatsarynnyy]

I've tested it with K8s extension.

Before:

After:

Looks much better now 🙂
Thanks! 👍

[akosyakov]

@azatsarynnyy that's cool!

I just cannot grasp what PR does. It uses and unuses exactly the same styles in core and by doing it somehow fix the issue in the plugin system? It sounds as a very implicit dependency and also unnecessary for switching color themes.

[AndrienkoAleksandr]

@akosyakov In the plugin system we display plugin webview in the iframe. And we need provide styles to this iframe.

[vinokurig]

Tested against GitHub plugin:
Before:

After:

Vscode:

Looks much better 👍 It is far from the vscode view but at least it is readable.

[olexii4]

I just provide Theia styles and variables into webview iframes(add materialcolors).
Now it looks like regular styles for Theia 'p-Widget' class.
In this place, we can restyle webview iframes depends on variables:
https://github.com/theia-ide/theia/pull/6155/files#diff-2cf6add9fc7566d40d46a3533b4d5cf7R26
And we can customize it.

[akosyakov]

In this place, we can restyle webview iframes depends on variables:
https://github.com/theia-ide/theia/pull/6155/files#diff-2cf6add9fc7566d40d46a3533b4d5cf7R26

@olexii4 probably it should be a comment in the code

[akosyakov]

code wise it looks now

@vinokurig @azatsarynnyy it would be good if you can double check with recent changes

@olexii4 commits have to be cleaned up and signed off: https://github.com/theia-ide/theia/blob/master/doc/pull-requests.md#checklist-sign-off

[olexii4]

@akosyakov I have done.

[vinokurig]

Tested with Github plugin

[azatsarynnyy]

checked with the latest changes - works as expected

[kittaakos]

FYI: the build is broken on the master: https://travis-ci.org/theia-ide/theia/builds/583626693

lerna ERR! /home/travis/build/theia-ide/theia/packages/core/lib/browser/theming.js:43
1586lerna ERR! require('../../src/browser/style/materialcolors.css').use();
1587lerna ERR!                                                       ^
1588lerna ERR! 
1589lerna ERR! TypeError: require(...).use is not a function
1590lerna ERR!     at Object.<anonymous> (/home/travis/build/theia-ide/theia/packages/core/lib/browser/theming.js:43:55)
1591lerna ERR!     at Module._compile (internal/modules/cjs/loader.js:778:30)
1592lerna ERR!     at Module.replacementCompile (/home/travis/build/theia-ide/theia/node_modules/nyc/node_modules/append-transform/index.js:58:13)

Is it related?

[kittaakos]

Also:

[AlexTugarev]

@olexii4 could you please take care of the broken master build?

[olexii4]

@AlexTugarev Ok. I will fix PR

[vince-fugnitto]

Also:

Can we enforce that PRs can not be merged if the CI (Travis and AppVeyor) are failing?

• We can enforce at least that Travis must be passing before enabling the merge, and perhaps AppVeyor as well (since it is much more stable than it used to be)

Opened the issue #6167