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).

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.

@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.

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.

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.

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

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

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

@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.

@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

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.

Proposed api is checked in with #104601

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

Super excited about this!

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

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"
        }
      ]
    }
  }

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

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

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

@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?

.@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?

@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

@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

.@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!

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