Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebView port mapping not working under Remote SSH #3362

Closed
renkun-ken opened this issue Jul 14, 2020 · 5 comments
Closed

WebView port mapping not working under Remote SSH #3362

renkun-ken opened this issue Jul 14, 2020 · 5 comments
Labels
ssh Issue in vscode-remote SSH upstream Issue identified as 'upstream' component related (exists outside of VS Code Remote)

Comments

@renkun-ken
Copy link

renkun-ken commented Jul 14, 2020 •
edited
Loading

  • VSCode Version: 1.47.0, 1.48.0-insider
  • Local OS Version: macOS 10.15.5, Ubuntu 20.04
  • Remote OS Version: Ubuntu 18.04
  • Remote Extension/Connection Type: SSH

Not sure if it is an issue of Remote-SSH or VSCode. So I already raised an issue there: microsoft/vscode#102449 which originates from REditorSupport/vscode-R#380.

To summarize, the following extension code is used to create the WebView.

function showBrowser(url: string, title: string, viewer: string | boolean) {
    console.info(`[showBrowser] uri: ${url}, viewer: ${viewer}`);
    if (viewer === false) {
        env.openExternal(Uri.parse(url));
    } else {
        const port = parseInt(new URL(url).port);
        const panel = window.createWebviewPanel(
            'browser',
            title,
            {
                preserveFocus: true,
                viewColumn: ViewColumn[String(viewer)],
            },
            {
                enableScripts: true,
                retainContextWhenHidden: true,
                portMapping: [
                    {
                        extensionHostPort: port,
                        webviewPort: port,
                    },
                ],
            });
        panel.webview.html = getBrowserHtml(url);
    }
    console.info('[showBrowser] Done');
}

function getBrowserHtml(url: string) {
    return `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html, body {
        height: 100%;
        padding: 0;
        overflow: hidden;
    }
  </style>
</head>
<body>
    <iframe src="${url}" width="100%" height="100%" frameborder="0" />
</body>
</html>
`;
}
  1. Call showBrowser("http://127.0.0.1:22784/library/base/html/get.html", "title", "Active") shows blank WebView.
  2. Then call showBrowser("http://127.0.0.1:22784/library/base/html/get.html", "title", false) opens a local web browser page which shows correctly.
  3. Then call showBrowser("http://127.0.0.1:22784/library/base/html/get.html", "title", "Active") again and the WebView shows correctly too.

It looks like the WebView port mapping is not enabled upon creation even though I specify portMapping.

Does this issue occur when you try this locally?: No
Does this issue occur when you try this locally and all extensions are disabled?: No
@github-actions github-actions bot added the ssh Issue in vscode-remote SSH label Jul 14, 2020
@Chuxel
Copy link
Member

Chuxel commented Jul 14, 2020

//cc: @mjbvz

@tamuratak tamuratak mentioned this issue Jul 15, 2020
Closed
@renkun-ken
Copy link
Author

Any updates on this? It looks like extensions that rely on WebView port mapping are completely broken.

@renkun-ken
Copy link
Author

@rpodcast confirms that the same problem also occurs in development container. Then it seems that the port mapping problem is not only limited to SSH.

@Chuxel @mjbvz

@Chuxel
Copy link
Member

Chuxel commented Jul 28, 2020

@mjbvz Should this be closed in favor of the VS Code issue? (microsoft/vscode#102449)

@mjbvz
Copy link

mjbvz commented Jul 28, 2020

duplicate of microsoft/vscode#102449

@mjbvz mjbvz closed this as completed Jul 28, 2020
@mjbvz mjbvz added the upstream Issue identified as 'upstream' component related (exists outside of VS Code Remote) label Jul 28, 2020
@github-actions github-actions bot locked and limited conversation to collaborators Sep 11, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
ssh Issue in vscode-remote SSH upstream Issue identified as 'upstream' component related (exists outside of VS Code Remote)
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Chuxel @renkun-ken @mjbvz