Add proposed webview view API #104601

mjbvz · 2020-08-13T22:53:20Z

This adds a new WebviewView proposed api to VS Code that lets webview be used inside views. Webview views can be contributed using a contribution point such as :

    "views": {
      "explorer": [
        {
          "type": "webview",
          "id": "cats.cat",
          "name": "Cats",
          "visibility": "visible"
        }
      ]
    },

extensions/image-preview/package.json

mjbvz · 2020-08-14T04:09:46Z

src/vs/workbench/api/browser/viewsExtensionPoint.ts

@@ -226,19 +236,76 @@ const viewsExtensionPoint: IExtensionPoint<ViewExtensionPointType> = ExtensionsR
 	jsonSchema: viewsContribution
 });

+
+export interface IViewResolver {


@sandy081 Here's an explanation of the changes I made in the views file:

View contributions now have an optional type. This can either be tree or webview.

It would be great if we could determine this automatically for extension authors but I wasn't able to find a clean way to do so.

The viewsExtensionPoint can now generate tree views and webview views.

It selects which view to use based on the type

In order to avoid a cycle, I added the new IViewResolverRegistry.

This is a registry that maps view types to resolvers. A resolver takes a IViewDescriptor and fills in the missing details, such as the specific type of view to use.

I updated viewExtensionPoint to register the resolver for tree views.

This resolver should do the exact same thing viewExtensionPoint previously had hardcoded

The webview then registers a new resolver for webview based views.

You know this code much better than I do so let me know if you have other suggestions on how this could be accomplished. The main thing is that the viewExtensionPoint cannot import any webview code since webviews are at a higher level in the codebase

It would be great if we could determine this automatically for extension authors but I wasn't able to find a clean way to do so.

It is cool but I think it adds confusion and complexity. It is clear if extension declares a tree/web view and creates the same using API.

Note: We need to validate if extension is creating the correct type of view for what it declared.

In order to avoid a cycle, I added the new IViewResolverRegistry.
This is a registry that maps view types to resolvers. A resolver takes a IViewDescriptor and fills in the missing details, such as the specific type of view to use.

Not sure if I understood the need for this resolver and why there is a cycle? For web view type, you have to pass the WebviewViewPane to ctorDescriptor , may I know where we have cycle here?

CCing @alexr00 as she owns custom tree views

I cleaned up the implementation so that this is no longer required. The changes in the view code should be much more minimal now

src/vs/workbench/contrib/webview/browser/webviewView.ts

For microsoft#46585 This adds a new `WebviewView` proposed api to VS Code that lets webview be used inside views. Webview views can be contributed using a contribution point such as : ```json "views": { "explorer": [ { "type": "webview", "id": "cats.cat", "name": "Cats", "visibility": "visible" } ] }, ```

sandy081 · 2020-08-19T15:39:36Z

src/vs/workbench/api/browser/viewsExtensionPoint.ts

@@ -226,19 +236,76 @@ const viewsExtensionPoint: IExtensionPoint<ViewExtensionPointType> = ExtensionsR
 	jsonSchema: viewsContribution
 });

+
+export interface IViewResolver {


It would be great if we could determine this automatically for extension authors but I wasn't able to find a clean way to do so.

It is cool but I think it adds confusion and complexity. It is clear if extension declares a tree/web view and creates the same using API.

Note: We need to validate if extension is creating the correct type of view for what it declared.

In order to avoid a cycle, I added the new IViewResolverRegistry.
This is a registry that maps view types to resolvers. A resolver takes a IViewDescriptor and fills in the missing details, such as the specific type of view to use.

Not sure if I understood the need for this resolver and why there is a cycle? For web view type, you have to pass the WebviewViewPane to ctorDescriptor , may I know where we have cycle here?

CCing @alexr00 as she owns custom tree views

By moving the webviews view into their own fodler, I was able to avoid the cycle the resolver was originally introduced for

mjbvz · 2020-08-19T22:36:52Z

This change should now be content complete and ready for review @alexr00

I'll remove cat example view from the image preview before check in

alexr00 · 2020-08-20T08:54:31Z

Custom tree view related/adjacent changes look good.

jrieken · 2020-08-20T09:27:57Z

extensions/image-preview/src/extension.ts

+			</body>
+			</html>`;
+
+		}


I assume this won't be merged ;-)

jrieken · 2020-08-20T09:29:43Z

src/vs/vscode.proposed.d.ts

+		 *
+		 * @return Optional promise indicating that the view has been fully resolved.
+		 */
+		resolveWebviewView(webviewView: WebviewView, context: WebviewViewResolveContext, token: CancellationToken): Promise<void> | void;


Return Thenable instead

src/vs/workbench/api/browser/viewsExtensionPoint.ts

sandy081 · 2020-08-20T12:34:48Z

Not sure if I missed this validation - checking if extension is registering tree data provider to the tree view type and the same for web view?

mjbvz · 2020-08-20T20:58:04Z

Made the suggested changes.

@sandy081 Registering a tree data provider for a webview based view will be treated the same as if you never registered the provider at all. I think this is reasonable behavior but if we see that extension authors are confused by which type of view to use, we could look into adding a better error message

mjbvz · 2020-08-20T21:09:13Z

Merging the initial work. Will continue to iterate on the implementation and polishing the API

usernamehw · 2020-09-01T19:36:38Z

Is this api going to be available in Stable 1.49.0 with --enable-proposed-api flag enabled?

mjbvz · 2020-09-01T22:35:55Z

Yes it should already be available in the latest insiders. See https://github.com/microsoft/vscode-extension-samples/tree/master/webview-view-sample for an example extension

mjbvz requested review from jrieken and sandy081 August 13, 2020 22:53

mjbvz self-assigned this Aug 13, 2020

mjbvz commented Aug 14, 2020

View reviewed changes

jrieken reviewed Aug 17, 2020

View reviewed changes

src/vs/workbench/contrib/webview/browser/webviewView.ts Outdated Show resolved Hide resolved

mjbvz added 5 commits August 17, 2020 18:46

Use proper activation event

02311f2

Transparent background

abb8c62

Fix resize observer

a0bc12b

Adding documentation

8f465e1

mjbvz force-pushed the webview-views branch from 10328ef to 8f465e1 Compare August 18, 2020 01:59

sandy081 requested changes Aug 19, 2020

View reviewed changes

mjbvz added 4 commits August 19, 2020 10:18

Move webview view to new directory under workbench

95179f9

Remove resolver

8de75cf

By moving the webviews view into their own fodler, I was able to avoid the cycle the resolver was originally introduced for

Use enum in more places

2a1fd61

Hook up title and visible properties for webview views

f548364

mjbvz marked this pull request as ready for review August 19, 2020 22:35

alexr00 approved these changes Aug 20, 2020

View reviewed changes

jrieken self-requested a review August 20, 2020 09:25

jrieken reviewed Aug 20, 2020

View reviewed changes

extensions/image-preview/src/extension.ts Outdated

</body>

</html>`;

}

Copy link

Member

jrieken Aug 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume this won't be merged ;-)

jrieken reviewed Aug 20, 2020

View reviewed changes

jrieken approved these changes Aug 20, 2020

View reviewed changes

sandy081 requested changes Aug 20, 2020

View reviewed changes

src/vs/workbench/api/browser/viewsExtensionPoint.ts Show resolved Hide resolved

mjbvz added 3 commits August 20, 2020 11:49

Remove test view

83c68bd

Prefer Thenable

0a9d8b8

Add unknown view type error to collector

00e2d19

mjbvz merged commit 61f799f into microsoft:master Aug 20, 2020

mjbvz mentioned this pull request Aug 21, 2020

Allow new WebView to be placed in its own sidebar activity #46585

Closed

usernamehw mentioned this pull request Sep 3, 2020

Create Webview view usernamehw/vscode-todo-md#7

Closed

11 tasks

github-actions bot locked and limited conversation to collaborators Oct 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add proposed webview view API #104601

Add proposed webview view API #104601

mjbvz commented Aug 13, 2020

mjbvz Aug 14, 2020

sandy081 Aug 19, 2020

mjbvz Aug 19, 2020

sandy081 Aug 19, 2020

mjbvz commented Aug 19, 2020

alexr00 commented Aug 20, 2020

jrieken Aug 20, 2020

jrieken Aug 20, 2020

sandy081 commented Aug 20, 2020

mjbvz commented Aug 20, 2020

mjbvz commented Aug 20, 2020

usernamehw commented Sep 1, 2020

mjbvz commented Sep 1, 2020

Add proposed webview view API #104601

Add proposed webview view API #104601

Conversation

mjbvz commented Aug 13, 2020

mjbvz Aug 14, 2020

Choose a reason for hiding this comment

sandy081 Aug 19, 2020

Choose a reason for hiding this comment

mjbvz Aug 19, 2020

Choose a reason for hiding this comment

sandy081 Aug 19, 2020

Choose a reason for hiding this comment

mjbvz commented Aug 19, 2020

alexr00 commented Aug 20, 2020

jrieken Aug 20, 2020

Choose a reason for hiding this comment

jrieken Aug 20, 2020

Choose a reason for hiding this comment

sandy081 commented Aug 20, 2020

mjbvz commented Aug 20, 2020

mjbvz commented Aug 20, 2020

usernamehw commented Sep 1, 2020

mjbvz commented Sep 1, 2020