[explorer]: Badge count for dirty editors

Fixes: #8296

Adds a badge count for dirty editors on the explorer tab icon.

Signed-off-by: Anas Shahid <[email protected]>

Author: Anas Shahid

packages/navigator/src/browser/navigator-frontend-module.ts

@@ -20,7 +20,7 @@ import { ContainerModule } from 'inversify';
 import {
     KeybindingContext, bindViewContribution,
     FrontendApplicationContribution, ViewContainer,
-    ApplicationShellLayoutMigration
+    ApplicationShellLayoutMigration,
 } from '@theia/core/lib/browser';
 import { FileNavigatorWidget, FILE_NAVIGATOR_ID, EXPLORER_VIEW_CONTAINER_ID, EXPLORER_VIEW_CONTAINER_TITLE_OPTIONS } from './navigator-widget';
 import { NavigatorActiveContext } from './navigator-keybinding-context';
@@ -33,6 +33,8 @@ import { NavigatorContextKeyService } from './navigator-context-key-service';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { NavigatorDiff } from './navigator-diff';
 import { NavigatorLayoutVersion3Migration } from './navigator-layout-migrations';
+import { NavigatorTabBarDecorator } from './navigator-tab-bar-decorator';
+import { TabBarDecorator } from '@theia/core/lib/browser/shell/tab-bar-decorator';
 
 export default new ContainerModule(bind => {
     bindFileNavigatorPreferences(bind);
@@ -72,4 +74,7 @@ export default new ContainerModule(bind => {
     bind(ApplicationShellLayoutMigration).to(NavigatorLayoutVersion3Migration).inSingletonScope();
 
     bind(NavigatorDiff).toSelf().inSingletonScope();
+    bind(NavigatorTabBarDecorator).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(NavigatorTabBarDecorator);
+    bind(TabBarDecorator).toService(NavigatorTabBarDecorator);
 });

packages/navigator/src/browser/navigator-tab-bar-decorator.ts

@@ -0,0 +1,64 @@
+/********************************************************************************
+ * Copyright (C) 2020 Ericsson and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable } from 'inversify';
+import { Event, Emitter } from '@theia/core/lib/common/event';
+import { TabBarDecorator } from '@theia/core/lib/browser/shell/tab-bar-decorator';
+import { EXPLORER_VIEW_CONTAINER_ID } from './navigator-widget';
+import { Title, Widget, FrontendApplicationContribution, FrontendApplication, Navigatable, Saveable, ApplicationShell } from '@theia/core/lib/browser';
+import { WidgetDecoration } from '@theia/core/lib/browser/widget-decoration';
+import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
+
+@injectable()
+export class NavigatorTabBarDecorator implements TabBarDecorator, FrontendApplicationContribution {
+    readonly id = 'theia-navigator-tabbar-decorator';
+    protected shell: ApplicationShell;
+
+    protected readonly emitter = new Emitter<void>();
+    private readonly toDispose = new DisposableCollection();
+    private readonly toDisposeOnDirtyChanged = new Map<Widget, Disposable>();
+
+    onStart(app: FrontendApplication): void {
+        this.shell = app.shell;
+        this.toDispose.push(this.shell.onDidAddWidget(w => {
+            if (Navigatable.is(w) && Saveable.isSource(w)) {
+                this.toDisposeOnDirtyChanged.set(w, w.saveable.onDirtyChanged(() => this.fireDidChangeDecorations()));
+            }
+        }));
+        this.toDispose.push(this.shell.onDidRemoveWidget(w => this.toDisposeOnDirtyChanged.get(w)?.dispose));
+    }
+
+    decorate(title: Title<Widget>): WidgetDecoration.Data[] {
+        if (title.owner.id === EXPLORER_VIEW_CONTAINER_ID) {
+            const changes = this.getDirtyEditorsCount();
+            return changes > 0 ? [{ badge: changes }] : [];
+        } else {
+            return [];
+        }
+    }
+
+    getDirtyEditorsCount(): number {
+        return this.shell.widgets.filter(widget => Navigatable.is(widget) && Saveable.isDirty(widget)).length;
+    }
+
+    get onDidChangeDecorations(): Event<void> {
+        return this.emitter.event;
+    }
+
+    protected fireDidChangeDecorations(): void {
+        this.emitter.fire(undefined);
+    }
+}