Installed & Built-In Extensions Count

What it does

Related to [eclipse-theia#6710]
- Displays a count of `Installed` and `Built-In` extensions.

How to test

1. Open the `Extensions` view.
2. Observe that counts are displayed in the toolbar item titles.
3. Install/uninstall extensions & observe that the count is updated.

Signed-off-by: seantan22 <sean.a.tan@ericsson.com>

packages/vsx-registry/src/browser/vsx-extensions-source.ts

@@ -17,6 +17,7 @@
 import { injectable, inject, postConstruct } from 'inversify';
 import { TreeSource, TreeElement } from '@theia/core/lib/browser/source-tree';
 import { VSXExtensionsModel } from './vsx-extensions-model';
+import { Emitter } from '@theia/core/lib/common';
 
 @injectable()
 export class VSXExtensionsSourceOptions {
@@ -35,10 +36,16 @@ export class VSXExtensionsSource extends TreeSource {
     @inject(VSXExtensionsModel)
     protected readonly model: VSXExtensionsModel;
 
+    protected readonly onDidUpdateEmitter = new Emitter<string>();
+    readonly onDidUpdate = this.onDidUpdateEmitter.event;
+
     @postConstruct()
     protected async init(): Promise<void> {
         this.fireDidChange();
-        this.toDispose.push(this.model.onDidChange(() => this.fireDidChange()));
+        this.toDispose.push(this.model.onDidChange(() => {
+            this.fireDidChange();
+            this.onDidChangeEmitter.fire();
+        }));
     }
 
     *getElements(): IterableIterator<TreeElement> {

packages/vsx-registry/src/browser/vsx-extensions-widget.ts

@@ -17,6 +17,7 @@
 import { injectable, interfaces, postConstruct, inject } from 'inversify';
 import { SourceTreeWidget } from '@theia/core/lib/browser/source-tree';
 import { VSXExtensionsSource, VSXExtensionsSourceOptions } from './vsx-extensions-source';
+import { VSXExtension } from './vsx-extension';
 
 @injectable()
 export class VSXExtensionsWidgetOptions extends VSXExtensionsSourceOptions {
@@ -50,28 +51,48 @@ export class VSXExtensionsWidget extends SourceTreeWidget {
     protected readonly extensionsSource: VSXExtensionsSource;
 
     @postConstruct()
-    protected init(): void {
+    protected async init(): Promise<void> {
         super.init();
         this.addClass('theia-vsx-extensions');
 
         this.id = VSXExtensionsWidget.ID + ':' + this.options.id;
-        const title = this.computeTitle();
-        this.title.label = title;
-        this.title.caption = title;
 
         this.toDispose.push(this.extensionsSource);
         this.source = this.extensionsSource;
+
+        const title = await this.updateTitle();
+        this.title.label = title;
+        this.title.caption = title;
+
+        this.toDispose.push(this.source.onDidChange(async () => {
+            const updatedTitle = await this.updateTitle();
+            this.title.label = updatedTitle;
+        }));
     }
 
-    protected computeTitle(): string {
+    protected async updateTitle(): Promise<string> {
+        let count: number = 0;
         if (this.id === VSXExtensionsWidget.INSTALLED_ID) {
-            return 'Installed';
-        }
-        if (this.id === VSXExtensionsWidget.BUILT_IN_ID) {
-            return 'Built-in';
+            count = await this.countExtensions(this.id);
+            return `Installed (${count})`;
+        } else if (this.id === VSXExtensionsWidget.BUILT_IN_ID) {
+            count = await this.countExtensions(this.id);
+            return `Built-in (${count})`;
         }
         return 'Open VSX Registry';
     }
 
+    protected async countExtensions(sourceOption: string): Promise<number> {
+        const elements = await this.source?.getElements();
+        if (!elements) {
+            return 0;
+        }
+        return Array.from(elements).filter(e => {
+            const extension = e as VSXExtension;
+            return sourceOption === VSXExtensionsWidget.BUILT_IN_ID
+                ? extension.builtin : !extension.builtin;
+        }).length;
+    }
+
 }