How can I add a number bubble to my custom extension icon for my activitybar viewContainer

Question

I'm using the activitybar viewContainer to add a sidebar icon specific to my extension. When you click the icon in the sidebar it opens a view that reveals a list. The list can be updated anytime. I would like the icon to have a number which shows how many items are in the list, exactly like the source control extension and the file explorer when files are unsaved.

Answer 1

It looks like this will be released in v1.72 (it is in the Insiders Build now - the demo is from the Insiders Build).

The api for badges on ViewContainers is quite simple:

export interface TreeView<T> extends Disposable {
  // other stuff
  /**
   * The badge to display for this TreeView.
   * To remove the badge, set to undefined.
  */
  badge?: ViewBadge | undefined;
  
  // other stuff
}

and here is what a ViewBadge is:

/**
 * A badge presenting a value for a view
 */
export interface ViewBadge {

  /**
   * A label to present in tooltip for the badge.
   */
  readonly tooltip: string;

  /**
   * The value to present in the badge.
   */
  readonly value: number;
}

So this code works:

// in a class that has a TreeView named 'tabView'
public tabView: vscode.TreeView<treeNodes>;

this.tabView = vscode.window.createTreeView('editor-groups', 
    { treeDataProvider: this.myTreeProvider,        
        showCollapseAll: true, 
        canSelectMany: true, 
        dragAndDropController: this.myTreeDragController
    });

// value is a number, tooltip and value are NOT optional
this.tabView.badge = {tooltip:"my badge tooltip", value: vscode.window.tabGroups.all.length};

and then you can update this.tabView.badge with a new value whenever you want (it seems you have to keep including the tooltip each time you update the value though).

Here it is working on an extension I wrote: