How to set vscode extension WebView to the bottom of the window?

Question

I am new to vscode extension development, recently I came across a sqlserver extension for vscode in channel 9 video.

In that video at 5.20, after executing query the results of the query are show in a panel view. I guess that must be a webView.

screen shot

My question is How to arrange the webView to the bottom of the window as marked by red box in the image.

By following code i am creating vscode webView.

const panel = vscode.window.createWebviewPanel("catCoding", "cat coding", vscode.ViewColumn.Two, { enableScripts: true });

Kikelia

Did you tried WebView API ? Webview API – Cupola

yes I tried webView api, setting the vscode.ViewColumn.Two opens the webView to split column . but don't know how to set it to bottom – Kikelia

@Kikelia any progress? – Moia

@Kikelia have you found a solution for this yet? I also need it. Thanks. – Paltry

No, I skipped that one !!! . If you managed to find it kindly inform me. – Kikelia

Answer 1

This is not exactly what you asked, but these are the best solutions I came up with so far.

Approach 1: Contribute a view

Instead of showing the WebView manually, you could register a provider and describe where vscode should display the view by contributing a view in your package.json.

This way the WebView is a panel and not an ordinary editor window.

Although, initially you can only show this view in one of the groups in the side bar. But the user can drag your view to where ever they want. Also into the bottom panel, where it will then stay.

   "contributes": {
        "views": {
            "explorer": [
                {
                    "type": "webview",
                    "id": "calicoColors.colorsView",
                    "name": "Calico Colors"
                }
            ]
        },
   }

Here is full the sample: https://github.com/microsoft/vscode-extension-samples/tree/master/webview-view-sample

---

Approach 2: Editor group commands

a) By changing the editor layout

Here is a somewhat hacky solution how to open an editor below the currently active one.

As you have already noticed it seems to be impossible to control this behavior directly. But we can execute all commands that a user could execute. So, we can also change the editor layout, which effects where the ViewColumns are displayed.

Under the assumption that initially only one editor group is open (in ViewColumn.One) we can change where vscode displays the second column (ViewColumn.Two) by changing the editor layout to "two rows".

    vscode.commands.executeCommand('workbench.action.editorLayoutTwoRows')
    const panel = vscode.window.createWebviewPanel(
        WebViewPanel.viewType,
        'Web View Title',
        vscode.ViewColumn.Beside,
        ...
    );

However, this will certainly get tricky once multiple editors are visible. And I have also not yet seen any way to find out which layout is currently active.

Neither does it seem to be possible to to find out how many columns are currently used. As TextEditor.viewColumn only returns a maximum of ViewColumn.Three and vscode.window.visibleTextEditors does (as its name suggest) only list TextEditors and not WebViews, etc...

b) Move editor to group below

Additionally, there are commands to move editor groups around. So we could open the WebView in the currently active view column and then move it to the group below (workbench.action.moveEditorToBelowGroup). Sadly, this has its own downsides. The new editor group will not necessarily use the full width.

---

The default keybindings.json seems to have a list of all possible commands. Even those that are not bound to any default hotkeys are still listed as comments at the bottom.

// - workbench.action.editorLayoutSingle
// - workbench.action.editorLayoutThreeColumns
// - workbench.action.editorLayoutThreeRows
// - workbench.action.editorLayoutTwoByTwoGrid
// - workbench.action.editorLayoutTwoColumns
// - workbench.action.editorLayoutTwoColumnsBottom
// - workbench.action.editorLayoutTwoRows
// - workbench.action.editorLayoutTwoRowsRight

Relaxation

Release 1.67 includes support for a new TabAPI It is now possible to list all TabGroups (window.tabGroups), so we can get a full list of used ViewColumns. – Relaxation

Answer 2

Solution in 2023

SourceCode https://github.com/microsoft/vscode-extension-samples/tree/main/tree-view-sample

File: package.json

"contributes": {
        "viewsContainers": {
            "activitybar":  --- change to >>>  "panel"

Run this example and you can see the effect.

Nikaniki

Answer 3

Maybe you should execute the following command "workbench.action.editorLayoutTwoRows" after the panel creation with "executeCommand" method.

Leucoderma