Pass object field instead of method argument

[vzhukovs]

What it does

This simple change proposal modifies the behavior of webview html setter to pass object field instead of method argument to the proxy delegator. With this approach it is possible to override current setter via method bind to add custom logic between setter and proxy delegation call.

Signed-off-by: Vladyslav Zhukovskyi vzhukovs@redhat.com

How to test

Build and run Theia from this PR and try to open any webview. Behavior should be the same as in master branch.

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

[paul-marechal]

It feels odd to rely on the current setter to access _html eventually calling a getter, would it be better to override the setter instead?

Example

That or wrap the call to the proxy into an overrideable method? The goal is to control what is sent to the proxy right?

[kittaakos]

Does not require to be tested

😅 nice.

@vzhukovs, please help me to understand this PR. Once this is merged, how do you make the customization on your side?

[vzhukovs]

Hi @kittaakos, sorry for the late answer.

Well, I'll try to describe the purpose of this change. In our downstream project we have to run extensions in isolated containers. There are wrappers around rpc and websocket. In short, there is a plugin deployer and dedicate extension (vs code). This extension might provide a webview. The main task is to have the correct loading webview's resources, e.g. css and js files. Due to architectural limitations we can not easily extend WebviewsExtImpl. And what we can do is to get WebviewsExtImpl object in runtime and rebind some methods. We modify the links like vscode-resource:/file/ in webview's html by adding the URI scheme to identify that this resource is remote ones and should be loaded from, links become like vscode-resource:/file-sidecar-${containerID}/. As far as theia.Webview has field html and it is implemented in WebviewImpl via setters and getters what we can do is to redefine setter property:

    Object.defineProperty(webview, '_html', {
      get: function () {
        // @ts-ignore
        return this._html;
      }.bind(this),
      set: function (value: string) {
        const sideCarScheme = `file-sidecar-${process.env.CHE_MACHINE_NAME}`;
        // @ts-ignore
        this._html = value.replace(
          /(["'])(vscode|theia)-resource:(\/\/([^\s\/'"]+?)(?=\/))?([^\s'"]+?)(["'])/gi,
          (_, startQuote, resourceType, _1, scheme, path, endQuote) => {
            if (scheme) {
              return _;
            }
            return `${startQuote}${resourceType}-resource://${sideCarScheme}${path}${endQuote}`;
          }
        );
      }.bind(this),
    });

this approach works only if we'll pass this._html to the the proxy:

this.proxy.$setHtml(this.viewId, this._html);

instead of:

this.proxy.$setHtml(this.viewId, value);

In the original case (in master branch), html content is modified on the plugin side, but not modified on the browser side.

[kittaakos]

I'll try to describe the purpose of this change.

Thank you so much for the details, @vzhukovs 👍