Fixed: #5978 support theming-webview-content

[502647092]

Signed-off-by: MiaoWoo admin@yumc.pw

What it does

Fixed: #5978

• support theme

How to test

• ext install humao.rest-client
• Send Request baidu.http

GET http://baidu.com

• ResponseWebView have currect css style
  
• change theme
• the web view have currect css style
  

Review checklist

• as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• as a reviewer, I agree to behave in accordance with the review guidelines

[502647092]

next we just get the current theme to replace.
@akosyakov
how to get current theme?

[vince-fugnitto]

next we just get the current theme to replace.
@akosyakov
how to get current theme?

https://github.com/theia-ide/theia/blob/2d4c8457c09cc6ca37fc5480d14eb080a74ed85a/packages/core/src/browser/theming.ts#L110

[502647092]

next we just get the current theme to replace.
@akosyakov
how to get current theme?

https://github.com/theia-ide/theia/blob/2d4c8457c09cc6ca37fc5480d14eb080a74ed85a/packages/core/src/browser/theming.ts#L110

emm but how to call it in this file
it's not in di system

[vince-fugnitto]

next we just get the current theme to replace.
@akosyakov
how to get current theme?

https://github.com/theia-ide/theia/blob/2d4c8457c09cc6ca37fc5480d14eb080a74ed85a/packages/core/src/browser/theming.ts#L110

emm but how to call it in this file
it's not in di system

You can search for getCurrentTheme and even ThemeService in the codebase, and you'll find examples of other extensions and files using it.

There is a static get method returning the service.

For instance:

const theme: Theme = ThemeService.get().getCurrentTheme();

[502647092]

@vince-fugnitto
after i add import { ThemeService } from '@theia/core/src/browser/theming';
plugin-ext-vscode can't build

@theia/plugin-ext-vscode: ../core/src/browser/keyboard/browser-keyboard-layout-provider.ts(18,37): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/thei
a/node_modules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: ../core/src/browser/keyboard/keyboard-layout-service.ts(18,36): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/theia/node_mo
dules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: ../core/src/browser/label-provider.ts(18,28): error TS7016: Could not find a declaration file for module 'file-icons-js'. '/home/project/TSWorkSpace/theia/node_modules/file-icons-j
s/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/file-icons-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'file-icons-js';`
@theia/plugin-ext-vscode: ../core/src/browser/shell/application-shell.ts(436,56): error TS7006: Parameter 'event' implicitly has an 'any' type.
@theia/plugin-ext-vscode: ../core/src/common/keyboard/keyboard-layout-provider.ts(17,55): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/theia/node_mo
dules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: 6:40:30 PM - Found 5 errors. Watching for file changes.

[vince-fugnitto]

@vince-fugnitto
after i add import { ThemeService } from '@theia/core/src/browser/theming';
plugin-ext-vscode can't build

@theia/plugin-ext-vscode: ../core/src/browser/keyboard/browser-keyboard-layout-provider.ts(18,37): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/thei
a/node_modules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: ../core/src/browser/keyboard/keyboard-layout-service.ts(18,36): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/theia/node_mo
dules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: ../core/src/browser/label-provider.ts(18,28): error TS7016: Could not find a declaration file for module 'file-icons-js'. '/home/project/TSWorkSpace/theia/node_modules/file-icons-j
s/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/file-icons-js` if it exists or add a new declaration (.d.ts) file containing `declare module 'file-icons-js';`
@theia/plugin-ext-vscode: ../core/src/browser/shell/application-shell.ts(436,56): error TS7006: Parameter 'event' implicitly has an 'any' type.
@theia/plugin-ext-vscode: ../core/src/common/keyboard/keyboard-layout-provider.ts(17,55): error TS7016: Could not find a declaration file for module 'native-keymap'. '/home/project/TSWorkSpace/theia/node_mo
dules/native-keymap/index.js' implicitly has an 'any' type.
@theia/plugin-ext-vscode:   Try `npm install @types/native-keymap` if it exists or add a new declaration (.d.ts) file containing `declare module 'native-keymap';`
@theia/plugin-ext-vscode: 6:40:30 PM - Found 5 errors. Watching for file changes.

Always import from lib never src.

[vince-fugnitto]

@502647092 can you provide the example http file used for testing in order to send a request?

[502647092]

@vince-fugnitto
after i import theme service
i can't start theia
you can look the ci log

[vince-fugnitto]

The backend (node) should not import browser specific content, that is the reason for failures.
You can see more information in our code organization wiki

[502647092]

The backend (node) should not import browser specific content, that is the reason for failures.
You can see more information in our code organization wiki

ok
how to get theme info from backend
i can't search theme service in node

[502647092]

@akosyakov
how to get theme info from backend
i can't search theme service in node

[akosyakov]

@502647092 It is not possible from plugin host process. We will need to do it differently somehow.

btw we should check that when a user changes the theme that webviews gets updated. With a suggested approach it seems to be written only once.

[502647092]

@502647092 It is not possible from plugin host process. We will need to do it differently somehow.

btw we should check that when a user changes the theme that webviews gets updated. With a suggested approach it seems to be written only once.

maybe we can add some event to handle

[akosyakov]

@olexii4 Maybe you have an idea how it could be handled?

[502647092]

@akosyakov
can we move replace action to Frontend
in plugin-vscode-commands-contribution.ts

[akosyakov]

@502647092 you can try, i need to think about it a bit, unfortunately no time today :(

[akosyakov]

@olexii4 @502647092 i had an idea, you will need to have a look how to implement it in the code:

There should be a communication channel between host window and iframe window, we could set an initial theme in the iframe window and notify about theme changes using it. In this approach you don't need to rewrite any html.

[502647092]

@akosyakov

i find a point to change style

[502647092]

@vince-fugnitto @akosyakov @theia-ide/plugin-system
who can test it

[502647092]

maybe I need move code to plugin-ext-vscode
then add other css support like variables Theme Color font

[502647092]

@akosyakov we can merge theme support first

[akosyakov]

maybe I need move code to plugin-ext-vscode

probably it will be good, but this code is not extensible, so fine with me for now.

@olexii4 @theia-ide/plugin-system do you know whether it is desirable? how could it be achieved?

I'm testing it now, if everything is fine and noone objects merging tomorrow.

[akosyakov]

It works nicely for me.