Now that VSCode has Custom Views, how can I implement one containing a simple textbox or anything but Tree?
The only example that I found is Azure Tools and it only registers tree items...
What I am after is something more like a Search panel. Is it possible to do it with VSCode Custom Views?
As of VS Code 1.29, you cannot add a search/input box to a tree view. This is tracked by this issue
You can add custom buttons to the top of a tree view using the menus -> view/title contribution point:
"menus": {
"view/title": [
{
"command": "myCommand",
"group": "navigation",
"when": "view == myTreeView.id"
}
]
LiveShare for example adds a join and start button:
You can also treat tree view items themselves as ad-hoc buttons. The Azure CosmosDB extension does this:
Please open a feature request if you are looking for more extensive customization
Related
I'd like to be able to toggle open the panel (termainl, debug, output, etc.. area) and focus on a specific custom view given an id. I know this is possible since there are focus commands for terminal debug etc but searching them up in the vscode source code just gives string references and not publicly usable functions. Any help would be appreciated. (Please don't give shortcut answers like ctrl+j, I want to do this with code)
I tried copying the format of the focus view commands above but the focus of the custom view didn't work. Seems like its not an automatic thing.
I think you want this. Every custom TreeView or WebView gets some commands added automatically by vscode. For example, my Editor Manager ViewContainer, with this view:
"views": {
"editorManager": [
{
"id": "editor-groups",
"name": "Groups",
"size": 1,
"visibility": "visible"
}
]
}
gets these commands added automatically (they can be found in the Keyboard Shortcuts, at least when the extension is activated):
editor-groups.focus
workbench.actions.treeView.editor-groups.refresh
workbench.actions.treeView.editor-groups.collapseAll
workbench.view.extension.editorManager
workbench.view.extension.editorManager.resetViewContainerLocation
You probably want the first one to focus your view in the Panel.
vscode.commands.executeCommand("editor-groups.focus");
I'm pretty new to VSCode development and looking through the docs I can't see much on how it would be possible to reuse the explorer view, say, in a new viewContainer
If I wanted to include the main explorer window in this new viewContainer is that even possible or is this an anti-pattern? It would be ideal to have ht main file explorer there for developers to use but have new windows underneath it that are more focused to the specific task.
I know you can just add new views into the root/main views section of an extensions config but I don't want to clutter the main view with a lot more views than is necessary.
So what would I put in here for example
{
// ... rest of package.json
"contributes": {
"views": {
"my-activitybar-container": [
{
"id": "<<MAIN_VSCODE_EXPLORER_VIEW>>",
"name": "Explorer"
},
// .. more views
]
}
}
// ... rest of file
}
I am developing a VSCode extension and just finished adding the icon to the activity bar. What I want to do is, execute a command whenever the user clicks that icon. This is what I have tried:
Package.json
"viewsContainers": {
"activitybar": [
{
"id": "myID",
"title": "Testing",
"icon": "res/logo.svg"
}
]
},
"views": {
"myID": [
{
"id": "Explorer",
"name": "Browse contents",
"commands": "vscode-myorg.getContents"
}
]
}
However, the vscode-myorg.getContents command is not getting executed after clicking the icon. How can I achieve this?
In looking at Feature Request: Add an API event to indicate when the sidebar viewlet changes which was closed as waiting for another still open issue on getContext to be resolved. And using intellisense in package.json there is no other key besides id, title and icon. So you cannot put a command entry there for instance (I tried and nothing happened.)
There are a couple of other options that might work for you:
If your views are populated by a TreeView then you can detect when that treeViews' visibility changes:
myTree.onDidChangeVisibility(ev => {
console.log(ev); // ev.visibiltiy = true/false
})
So you can detect when the view becomes visible because the Activity Bar icon is clicked. That does work. However, this event is also triggered when the view is already opened and the user just collapses or expands that individual view. And I don't think there is really any way to distinguish between the two conditions.
If you are populating your views with a WebView there is also an onDidChangeVisibility event for that.
There is an activation event for a View becoming active:
"activationEvents": [
"onView:package-dependencies"
]
but that will only fire the first time a view is activated - and starts your extension's activate function so is probably not what you are looking for.
You have to define any new command of yours.
"commands": [
{
"command": "vscode-workat.getProblems",
"title": "Get Problems"
},
]
as well as register it in the extension.
I saw the when-clause-contexts document but I can't find something like that... Is there any conditions WebView panel is active or alternatives?
I'm now making copy & paste feature in my extension but if when is not specified, some default keybindings may be blocked.
There is not a generic context key for when a webview is active. However using the setContext command, you can create a custom context that tracks just when one of your webviews is active
Here's what VS code's markdown preview (which also uses a webview) does to create a custom context key that is set when the preview is active:
https://github.com/Microsoft/vscode/blob/cd7c7c5fa2c16c6e8281436c35e9a7709cfbd89d/extensions/markdown-language-features/src/features/previewManager.ts#L152
I believe this new context value is what you need:
New activeWebviewPanelId context key
The new activeWebviewPanelId context key tracks the viewType of the currently focused webview panel. You can use it in when clauses to enable commands or menu items when your webview is focused
"when": "activeWebviewPanelId == 'markdown.preview'"
from v1.71 Release Notes: active webview panel context key
I am currently working on a web browser application using Eclipse e4.
I want to put on the toolbar a toggle button for saving my favorites url's.
I want it to be like in Google Chrome , a star which gets the yellow color when it's pressed(the link was added to favorites).
How can I do this?
Should I use for this the Application.e4xmi ?
You can use the Application.e4xmi if this is a tool bar for a Window or a Part. You would use a 'Handled Tool Item' in the tool bar.
The Application.e4xmi does not provide a way to set separate icons for the selected and normal states of a tool item so you will have to do this in the handler class. Something like:
#Execute
public void execute(MToolItem mitem)
{
if (mitem.isSelected())
mitem.setIconURI("platform:/plugin/your.plugin.id/icons/selectedimage.png");
else
mitem.setIconURI("platform:/plugin/your.plugin.id/icons/unselectedimage.png");
// TODO other code
}