Allow new WebView to be placed in its own sidebar activity

[eamodio]

This request is similar to #43049 but I feel it is different enough to warrant this request.

To reiterate from #43049 (comment)

While having webviews as editors is great, depending on the use-case, they can end up being the only mechanism for an extension to provide richer behaviors and interactions (think of chat integration) which can lead to a compromised experience. Because now the editor/tab needs to be managed, positioned, etc by the user.

I am currently bringing the https://codestream.com/ experience from Atom to vscode and really need to be able to provide the chat stream functionality seen here (on the right rail):

With a webview hosted in its own sidebar activity, I should be able to provide a similar (much less compromised) experience. None of the other alternatives provide anywhere close to the desired experience.

While I can definitely appreciate (and largely agree) with vscode strict api and not wanting to allow the proliferation of webviews, I would argue that allowing a single webview in a sidebar activity shouldn't really change that vs an editor -- especially since only 1 activity can be visible at a time. But it makes a huge difference to the user experience. In the example above, if the webview must be in an editor tab, it now causes lots of edge case issues, requires user positioning, tab management, etc. All of which are much less than ideal for the user.

EDIT: In addition, I would equally love it if a webview could be hosted in a (bottom) panel too.

Thanks for the consideration.

//cc @jrieken @mjbvz @lostintangent

[GordonSmith]

For my use case I would like to host a WebView as a Bottom Panel. Think of the scenario where a user is submitting SQL from the editor and wants to see the results (ideally in the bottom panel).

[kaleidawave]

I second this. Would be great if we could have the functionality of adding inputs and buttons in the activity bar (same sort of functionality as already exists in the search and git side windows) rather than being limited to just a tree view option.

[pelmers]

@jrieken I noticed this is not scheduled in a milestone, are you willing to accept pull requests to resolve this issue? I would like to use this feature for an extension I am working on.

[jrieken]

are you willing to accept pull requests to resolve this issue?

Sorry, this is rather large and touches too much code from various owners that a PR would be feasible.

[binaryben]

Is there any indication on if/when this will be possible? Extensions shouldn't use my editor space to display things that would make much more sense in a bottom panel/sidebar (I already have enough things open that I am actually trying to edit). I also would like to make a few extensions that would use this as well.

[royaction123]

I released a color-picker/palette extension yesterday. This feature would be very welcome ...
https://marketplace.visualstudio.com/items?itemName=RoyAction.color-manager

[favna]

How many votes are required for picking this up MS dev team? It's on 50 right now.

[ShMcK]

@eamodio any chance you could share which solution you went with? https://github.com/TeamCodeStream/CodeStream seems to use a functional side panel

[kaleidawave]

@ShMcK It seems CodeStream uses WebView in a normal editor window but tiled. Although it looks its in a side panel it isn't. The tutorial for doing that https://code.visualstudio.com/api/extension-guides/webview . Not sure how you force tiling though.

This issue / thread here is about allowing the WebView in the sidebar to provide similar experiences to search and source control. You could do CodeStreams way but it's a bit of a hack and less user friendly than if the vscode allowed more advanced controls than just treeview in the sidebar panel.

[eamodio]

@ShMcK In CodeStream we were using a hack to hijack the activity bar icon -- basically using a registered view that would do nothing but show/hide our Webview when the view was rendered (it would also hide itself). Unfortunately because of some recent internal changes in VS Code this hack is no longer viable -- since the view would end up being "rendered" for other reasons than just someone using the activity bar icon (changing the color theme for example).

So as of right now I don't have any decent way of simulating a Webview as a sidebar activity. Hopefully Webviews will be allowed as an actual sidebar.

/cc @sandy081 @mjbvz

[venkatzhub]

Any information on when this would be added to a milestone? Based on the comments and similar issues opened, it looks like there is a lot of interest and need for this. We are also desperately looking for this capability for a feature we added in our VScode extension. Initial comments from our customers are indicating that they would like the web view as a bottom panel.

Any information on this would be highly appreciated.

[mjbvz]

Proposed api is checked in with #104601

Main entry point: https://github.com/microsoft/vscode/blob/master/src/vs/vscode.proposed.d.ts#L2056

[ppezaris]

Super excited about this!

[GordonSmith]

@mjbvz - Will we be able to default this view down in the problems / terminal panel?

[mjbvz]

Yes, it uses the same views contribution point as the tree view api.

To put the webview view in the panel, add a custom viewContainer and contribute the view to it:

 "contributes": {
    "viewsContainers": {
      "panel": [
        {
          "id": "my-fancy-view",
          "title": "Fancy View",
          "icon": "fancy.icon"
        }
      ]
    },
    "views": {
      "my-fancy-view": [
        {
          "type": "webview",
          "id": "my-webview",
          "name": "Webview"
        }
      ]
    }
  }

[GordonSmith]

...and there was much merriment... Thanks for this!!!

(now who can I nag about: #77138)??

[mjbvz]

Extension sample showing how the use the API. It requires the latest VS Code insiders to work

[GordonSmith]

@mjbvz When the webview is hosted in a "panel" how can we force it to be visible (like terminal.show() does)?

It feels like I should have a reference to the hosting panel (so I can show it and change its title etc.)

Also I am unable to get registerWebviewPanelSerializer to work?

[RandomFractals]

.@mjbvz I have not checked out the code behind all this yet, but are there options to pin or specify where these side bar webviews show up in vscode panels layout?

That tree view/explorer view contrib. was a good example.

Can we show them on the left or right side of debug panel?

How would that api call & setup look like?

Also, do we have control over specifying default side bar panel width?

Plus, I do want to replace default code minimap. Can we stick custom code graph side bars in that view?

[mjbvz]

@GordonSmith I added a show method for #106028

You don't need a panel serializer. All webview views are implicitly serialized (although your extension can chose never to save any state if it doesn't need to). You can access the persisted state either inside the webview itself (this is what the extension sample does) or from context.state during resolve

[mjbvz]

@RandomFractals Webview views are contributed the same way as normal tree views which can either go into the side bar or panel by default.

This api does not enable showing views in any new locations. Open separate feature requests if you want to see that supported

[RandomFractals]

.@mjbvz there are already many requests open for that show view in other places like #26777 I linked above, with over 500 thumbs up. Not sure me opening another one will make a difference. Maybe you can do that next after this addition.

Thanks!

[GordonSmith]

@mjbvz is it just me or did the proposed API never make it into the official vscode.d.ts file?