complete support of webviews

[akosyakov]

What it does

• secure webview, see for details: https://blog.mattbierner.com/vscode-webview-web-learnings/
  • secure resource fetching via service worker, fix webview resource path is incorrect in some cases #6373, fix pass webview URIs as is #6282, fix implement asWebviewUri api #6218
  • serve each webview from own origin to isolate access to shared browser state like cookies and local storage, fix Webview with "script-src vscode-resource:" fails to load #6296, fix [hosted-plugin][webview] Error: Refused to apply inline style because it violates the following Content Security Policy #5694
  • make the webview origin pattern configurable
  • auto detect mime/type of resolved resources
• webview copy/paste, fix [vscode][webview] can't copy content from webview use Ctrl + C #6217, see [vscode][webview] can't copy content from webview use Ctrl + C #6217 (comment)
• webview theming, fix [vscode] webview does not have proper styles  #5518
• webview resource caching, see complete support of webviews #6465 (comment)
• webview focus management
  • webview as a nested iframe to install focus tracker within webview even if JS is not allowed
• triggering keybindings from the webview
• update content and styles on toggle maximize, fix Webview disappear on resize to full screen #6453
• complete webview APIs
  • port mapping, see https://stackoverflow.com/questions/55978517/why-does-localhost-not-work-inside-my-vs-codes-webviews-when-connected-to-remot
  • enable scripts
  • local resource roots
  • enable command uris
    • register command open handler
  • enable find widget (does not make sense in the browser context)
  • retain context when hidden
• restoring webviews
  • on reload
  • on reconnection
  • restoring the icon, fix [plug-in] improve the retrieval of icons in webviews #5786
  • don't preserve if there is no a corresponding serializer
• electron support testing - the same code, not relying on Electron webviews, instead move later to latest Electron and isolate render processes from Node.js
• vscode webview api tests compliance
  • fix webviews should preserve their context when they are moved between view columns #5032
  • images cannot be loaded via webview URIs
• a CQ for copied iframe webview code - https://dev.eclipse.org/ipzilla/show_bug.cgi?id=21051
• update copyrights for copied code and add links to the original code
• update CHANGELOG
  • clarify how to configure the unique origin for each webview to isolate them from the browser shared state
  • clarify how to customize external URI resolution
  • clarify why vscode.previewHTML command is removed
  • breaking: use VS Code color theming to style webviews, --theia prefix is supported as well

How to test

Use following VS Code extensions:

• https://github.com/microsoft/vscode-extension-samples/tree/master/webview-sample for general testing
  • one can modify source code to add links to remote and command URLs for testing
• https://github.com/Huachao/vscode-restclient/releases to test webview focus and title actions
• https://github.com/akosyakov/vscode-test-asExternalUri to test external URIs
• https://marketplace.visualstudio.com/items?itemName=typefox.states-extension to test scrolling
• git codelens vscode extension to test theming
• quarkus vscode extension to test csp source
• https://marketplace.visualstudio.com/items?itemName=typefox.states-extension to test performance

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

[akosyakov]

@BroKun @amiramw @502647092 Could you check please how well this PR works for your webviews? Also whether you have any issues with running it on windows (if it is applicable to your case).

[akosyakov]

@marcdumais-work I had to copy webview iframe code from 1.40.0 version. It is not available in previous versions. CQ: https://dev.eclipse.org/ipzilla/show_bug.cgi?id=21051

[akosyakov]

@olexii4 @benoitf Could you point please to theia plugins contributing webview for testing?

Important difference in this PR that it switches to vscode way of styling webviews, i.e. https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content

[akosyakov]

A CQ was already approved: https://dev.eclipse.org/ipzilla/show_bug.cgi?id=21051#c3 🏎

[benoitf]

Hello @akosyakov https://github.com/eclipse/che-theia-samples/tree/e50ebe47e1769fa51622bf9c55626b3dfb3d298b/samples/webview-sample-plugin and https://github.com/eclipse/che-theia-samples/tree/13ae2244c033e020812a93840be8223f276694fc/samples/tasks-plugin

(I'm running late in notifications)

[akosyakov]

Merging, please file issues to ask for help. From my experience for last weeks, webview is not trivial thing from user (especially to make it work remotely with localhost services) and implementation perspectives.

[marcdumais-work]

Thanks for your hard work on this feature @akosyakov !

[chrisunl]

Hi,

Where should 'caches' be defined?

[marcdumais-work]

Good question - I didn't know either so I opened this file in Gitpod and using "Peek Definition" from the context menu, over that symbol, I found it's from the DOM API:

So this is implemented in/by your web browser. Hope this help.

[akosyakov]

It’s a browser API. It’s not available over http, webviews work only over https or localhost for testing.

[paul-marechal]

Just a thought, but maybe prefixing such variables like window.caches would help readers?

[DanTup]

@akosyakov I was just doing some testing on GitPod (so I don't know if this PR is deployed there), but calling openExternal seems to not map the URL (eg. I'm calling it with localhost and it's spawning a new browser tab that's pointing at localhost rather than the exposed URL).

I don't know if it's just because there are undeployed changes, or if this is something that isn't done yet. openExternal should internally do the same as asExternalUri (expose and transform the URI) prior to opening the window.

[akosyakov]

@DanTup this PR was not deployed in Gitpod yet, I think Gitpod is targeting next week to get it there cc @svenefftinge

openExternal should internally do the same as asExternalUri (expose and transform the URI) prior to opening the window.

yes, it is how it's implemented:

theia/packages/core/src/browser/http-open-handler.ts

Line 38 in 84d8678

async open(uri: URI): Promise<Window | undefined> {

[DanTup]

Ah great - I did look through the code but couldn't find the implementation. Thanks!