theia: VSCode extension with HTML part broken

Description

The TLA+ VSCode extension has rendering issues with Theia and Theia fails completely with the extension’s HTML part.

Gitpod with hash f5d7d65f-bdab-4f57-994b-3ad1539792bb was created from this TLA+ spec.

Reproduction Steps

Peek 2019-11-18 21-10

In VSCode

Peek 2019-11-18 21-15

/cc @alygin

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 21 (11 by maintainers)

Most upvoted comments

@akosyakov, you’ve spotted it correctly, appendCodeLinkChild() won’t add the <a> element if the last parameter is empty.

I guess, this issue can be closed. All the problems are either fixed or covered in other specialised issues. @lemmy?

@alygin I’ve tried, it does not work for me, looking at the code, this part looks suspicious:

const resourcesDiskPath = vscode.Uri.file(path.join(extContext.extensionPath, 'resources'));
    const resourcesPath = viewPanel.webview.asWebviewUri(resourcesDiskPath);
    if (!viewHtml) {
        viewHtml = fs.readFileSync(path.join(resourcesPath.fsPath, 'check-result-view.html'), 'utf8');
    }
    

asWebviewUri returns an external URI to load local content, in remote context it is something like http://webview-host/vscode-resource/file/.... The point is that you cannot read filesystem with that and you should not. The extension is always running on the workspace machine and you can just do fs.readFileSync(path.join(path.join(extContext.extensionPath, 'resources', 'check-result-view.html')), 'utf8');.

Important that within the webview resources should be loaded using links created by asWebviewUri.

with #6465: Screen Shot 2019-11-19 at 09 17 31

It does not look good because the extension is not designed to work remotely. It uses vscode-resource scheme as a csp source: https://github.com/alygin/vscode-tlaplus/blob/f1fb18ef796181f42ab74b3fc53b2d976ba9edec/resources/check-result-view.html#L5

It does not work when resources are served from the remote http endpoint. It has to be fixed to use webview.cspSource as described in VS Code docs: https://code.visualstudio.com/api/extension-guides/webview#content-security-policy