debug: show notification in debug console icon when there is unseen output

fixes #2280

src/vs/workbench/common/events.ts

@@ -98,7 +98,7 @@ export class EventType {
 	static COMPOSITE_OPENING = 'compositeOpening';
 
 	/**
-	 * Event type for when a viewlet is opened.
+	 * Event type for when a composite is opened.
 	 */
 	static COMPOSITE_OPENED = 'compositeOpened';
 

src/vs/workbench/parts/debug/browser/media/debug.contribution.css

@@ -75,14 +75,6 @@
 
 /* Actionbar actions */
 
-.monaco-workbench .debug-action.configure {
-	background: url('configure.svg') center center no-repeat;
-}
-
-.monaco-workbench .debug-action.toggle-repl {
-	background: url('repl.svg') center center no-repeat;
-}
-
 .monaco-workbench .debug-action.step-over {
 	background: url('step-over.svg') center center no-repeat;
 }
@@ -274,14 +266,6 @@
 	background: url('stackframe-and-breakpoint-dark.svg') center center no-repeat;
 }
 
-.monaco-workbench.vs-dark .debug-action.configure {
-	background: url('configure-inverse.svg') center center no-repeat;
-}
-
-.monaco-workbench.vs-dark .debug-action.toggle-repl {
-	background: url('repl-inverse.svg') center center no-repeat;
-}
-
 .monaco-workbench.vs-dark .debug-action.step-over {
 	background: url('step-over-inverse.svg') center center no-repeat;
 }
@@ -345,10 +329,6 @@
 	width: 16px;
 }
 
-.monaco-workbench.hc-black .debug-action.toggle-repl:before {
-	content: url('repl-inverse.svg');
-}
-
 .monaco-workbench.hc-black .debug-actions-widget {
 	background-color: #333;
 	box-shadow: 0 2px 8px #000;

src/vs/workbench/parts/debug/browser/media/debugViewlet.css

@@ -9,6 +9,46 @@
 	height: 100%;
 }
 
+/* Actionbar actions */
+
+.monaco-workbench .debug-action.configure {
+	background: url('configure.svg') center center no-repeat;
+}
+
+.monaco-workbench .debug-action.toggle-repl {
+	background: url('repl.svg') center center no-repeat;
+}
+
+.monaco-workbench .debug-action.toggle-repl.notification:before {
+	content: '';
+	width: 6px;
+	height: 6px;
+	background-color: #CC6633;
+	position: absolute;
+	top: 11px;
+	right: 5px;
+	border-radius: 10px;
+	border: 1px solid white;
+}
+
+.monaco-workbench.vs-dark .debug-action.configure {
+	background: url('configure-inverse.svg') center center no-repeat;
+}
+
+.monaco-workbench.vs-dark .debug-action.toggle-repl {
+	background: url('repl-inverse.svg') center center no-repeat;
+}
+
+.monaco-workbench.hc-black .debug-action.configure {
+	background: url('configure-inverse.svg') center center no-repeat;
+}
+
+.monaco-workbench.hc-black .debug-action.toggle-repl:before {
+	content: url('repl-inverse.svg');
+}
+
+/* Debug viewlet trees */
+
 .debug-viewlet .monaco-tree .monaco-tree-row > .content {
 	line-height: 22px;
 }

src/vs/workbench/parts/debug/electron-browser/debugActions.ts

@@ -10,6 +10,8 @@ import { TPromise } from 'vs/base/common/winjs.base';
 import editorCommon = require('vs/editor/common/editorCommon');
 import editorbrowser = require('vs/editor/browser/editorBrowser');
 import { EditorAction, Behaviour } from 'vs/editor/common/editorAction';
+import { IEventService } from 'vs/platform/event/common/event';
+import { EventType, CompositeEvent } from 'vs/workbench/common/events';
 import debug = require('vs/workbench/parts/debug/common/debug');
 import model = require('vs/workbench/parts/debug/common/debugModel');
 import { IPartService } from 'vs/workbench/services/part/common/partService';
@@ -668,20 +670,38 @@ export class ToggleReplAction extends AbstractDebugAction {
 		@IDebugService debugService: IDebugService,
 		@IPartService private partService: IPartService,
 		@IPanelService private panelService: IPanelService,
-		@IKeybindingService keybindingService: IKeybindingService
+		@IKeybindingService keybindingService: IKeybindingService,
+		@IEventService private eventService: IEventService
 	) {
 		super(id, label, 'debug-action toggle-repl', debugService, keybindingService);
 		this.enabled = this.debugService.getState() !== debug.State.Disabled;
+		this.registerListeners();
 	}
 
 	public run(): TPromise<any> {
-		const panel = this.panelService.getActivePanel();
-		if (panel && panel.getId() === debug.REPL_ID) {
+		if (this.isReplVisible()) {
 			this.partService.setPanelHidden(true);
-
 			return TPromise.as(null);
 		}
 
 		return this.debugService.revealRepl();
 	}
+
+	private registerListeners(): void {
+		this.toDispose.push(this.debugService.getModel().addListener2(debug.ModelEvents.REPL_ELEMENTS_UPDATED, () => {
+			if (!this.isReplVisible()) {
+				this.class = 'debug-action toggle-repl notification';
+			}
+		}));
+		this.toDispose.push(this.eventService.addListener2(EventType.COMPOSITE_OPENED, (e: CompositeEvent) => {
+			if (e.compositeId === debug.REPL_ID) {
+				this.class = 'debug-action toggle-repl';
+			}
+		}));
+	}
+
+	private isReplVisible(): boolean {
+		const panel = this.panelService.getActivePanel();
+		return panel && panel.getId() === debug.REPL_ID;
+	}
 }