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.

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

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

Closed
eamodio opened this issue Mar 26, 2018 · 23 comments
Closed

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

eamodio opened this issue Mar 26, 2018 · 23 comments
Assignees
Labels
api api-finalization feature-request Request for new features or functionality insiders-released Patch has been released in VS Code Insiders on-testplan webview Webview issues

Comments

@eamodio
Copy link
Contributor

eamodio commented Mar 26, 2018

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

image

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

@bpasero bpasero removed their assignment Mar 27, 2018
@jrieken jrieken added feature-request Request for new features or functionality api webview Webview issues labels Mar 27, 2018
@GordonSmith
Copy link

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
Copy link

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
Copy link
Contributor

pelmers commented Feb 6, 2019

@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
Copy link
Member

jrieken commented Feb 6, 2019

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
Copy link

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
Copy link

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

@favna
Copy link

favna commented Sep 25, 2019

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

@ShMcK
Copy link

ShMcK commented Sep 29, 2019

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

@kaleidawave
Copy link

@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
Copy link
Contributor Author

eamodio commented Sep 30, 2019

@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
Copy link

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
Copy link
Collaborator

mjbvz commented Aug 21, 2020

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
Copy link

Super excited about this!

@GordonSmith
Copy link

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

@mjbvz
Copy link
Collaborator

mjbvz commented Aug 24, 2020

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

Screen Shot 2020-08-24 at 8 52 35 AM

@GordonSmith
Copy link

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

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

mjbvz added a commit to microsoft/vscode-extension-samples that referenced this issue Aug 25, 2020
@mjbvz
Copy link
Collaborator

mjbvz commented Aug 25, 2020

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

@GordonSmith
Copy link

GordonSmith commented Sep 3, 2020

@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
Copy link

RandomFractals commented Sep 11, 2020

.@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
Copy link
Collaborator

mjbvz commented Sep 11, 2020

@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
Copy link
Collaborator

mjbvz commented Sep 11, 2020

@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
Copy link

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

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

@github-actions github-actions bot locked and limited conversation to collaborators Oct 31, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
api api-finalization feature-request Request for new features or functionality insiders-released Patch has been released in VS Code Insiders on-testplan webview Webview issues
Projects
None yet
Development

No branches or pull requests

16 participants