tree/list: add events for DOM focus/blur

src/vs/base/browser/ui/list/listWidget.ts

@@ -237,6 +237,12 @@ export class List<T> implements IDisposable {
 	private _onDOMFocus: Event<FocusEvent>;
 	get onDOMFocus(): Event<FocusEvent> { return this._onDOMFocus; }
 
+	private _onDOMBlur: Event<FocusEvent>;
+	get onDOMBlur(): Event<FocusEvent> { return this._onDOMBlur; }
+
+	private _onDispose: Emitter<void>;
+	get onDispose(): Event<void> { return this._onDispose.event; }
+
 	constructor(
 		container: HTMLElement,
 		delegate: IDelegate<T>,
@@ -257,9 +263,13 @@ export class List<T> implements IDisposable {
 		this.view.domNode.setAttribute('role', 'tree');
 		this.view.domNode.tabIndex = 0;
 		this.controller = new Controller(this, this.view);
-		this.disposables = [this.focus, this.selection, this.view, this.controller];
 
 		this._onDOMFocus = domEvent(this.view.domNode, 'focus');
+		this._onDOMBlur = domEvent(this.view.domNode, 'blur');
+		this._onDispose = new Emitter<void>();
+
+		this.disposables = [this.focus, this.selection, this.view, this.controller, this._onDispose];
+
 		this.onFocusChange(this._onFocusChange, this, this.disposables);
 
 		if (options.ariaLabel) {
@@ -426,6 +436,10 @@ export class List<T> implements IDisposable {
 		return `${this.idPrefix}_${index}`;
 	}
 
+	isDOMFocused(): boolean {
+		return this.view.domNode === document.activeElement;
+	}
+
 	private toListEvent({ indexes }: ITraitChangeEvent) {
 		return { indexes, elements: indexes.map(i => this.view.element(i)) };
 	}
@@ -444,6 +458,7 @@ export class List<T> implements IDisposable {
 	}
 
 	dispose(): void {
+		this._onDispose.fire();
 		this.disposables = dispose(this.disposables);
 	}
 }

src/vs/base/parts/tree/browser/tree.ts

@@ -11,11 +11,16 @@ import Mouse = require('vs/base/browser/mouseEvent');
 import Keyboard = require('vs/base/browser/keyboardEvent');
 import { INavigator } from 'vs/base/common/iterator';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
+import Event from 'vs/base/common/event';
 
 export interface ITree extends Events.IEventEmitter {
 
 	emit(eventType: string, data?: any): void;
 
+	onDOMFocus: Event<FocusEvent>;
+	onDOMBlur: Event<FocusEvent>;
+	onDispose: Event<void>;
+
 	/**
 	 * Returns the tree's DOM element.
 	 */

src/vs/base/parts/tree/browser/treeImpl.ts

@@ -12,6 +12,7 @@ import Model = require('vs/base/parts/tree/browser/treeModel');
 import View = require('./treeView');
 import _ = require('vs/base/parts/tree/browser/tree');
 import { INavigator, MappedNavigator } from 'vs/base/common/iterator';
+import Event, { Emitter } from 'vs/base/common/event';
 
 export class TreeContext implements _.ITreeContext {
 
@@ -56,6 +57,12 @@ export class Tree extends Events.EventEmitter implements _.ITree {
 	private model: Model.TreeModel;
 	private view: View.TreeView;
 
+	get onDOMFocus(): Event<FocusEvent> { return this.view.onDOMFocus; }
+	get onDOMBlur(): Event<FocusEvent> { return this.view.onDOMBlur; }
+
+	private _onDispose: Emitter<void> = new Emitter<void>();
+	get onDispose(): Event<void> { return this._onDispose.event; }
+
 	constructor(container: HTMLElement, configuration: _.ITreeConfiguration, options: _.ITreeOptions = {}) {
 		super();
 
@@ -332,6 +339,9 @@ export class Tree extends Events.EventEmitter implements _.ITree {
 			this.view = null;
 		}
 
+		this._onDispose.fire();
+		this._onDispose.dispose();
+
 		super.dispose();
 	}
 }

src/vs/base/parts/tree/browser/treeView.ts

@@ -22,6 +22,7 @@ import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { HeightMap, IViewItem } from 'vs/base/parts/tree/browser/treeViewModel';
 import _ = require('vs/base/parts/tree/browser/tree');
 import { KeyCode } from 'vs/base/common/keyCodes';
+import Event, { Emitter } from 'vs/base/common/event';
 
 export interface IRow {
 	element: HTMLElement;
@@ -439,6 +440,12 @@ export class TreeView extends HeightMap {
 	private highlightedItemWasDraggable: boolean;
 	private onHiddenScrollTop: number;
 
+	private _onDOMFocus: Emitter<FocusEvent> = new Emitter<FocusEvent>();
+	get onDOMFocus(): Event<FocusEvent> { return this._onDOMFocus.event; }
+
+	private _onDOMBlur: Emitter<FocusEvent> = new Emitter<FocusEvent>();
+	get onDOMBlur(): Event<FocusEvent> { return this._onDOMBlur.event; }
+
 	constructor(context: _.ITreeContext, container: HTMLElement) {
 		super();
 
@@ -1202,7 +1209,7 @@ export class TreeView extends HeightMap {
 
 	private onContextMenu(keyboardEvent: KeyboardEvent): void;
 	private onContextMenu(mouseEvent: MouseEvent): void;
-	private onContextMenu(event: Event): void {
+	private onContextMenu(event: KeyboardEvent | MouseEvent): void {
 		var resultEvent: _.ContextMenuEvent;
 		var element: any;
 
@@ -1515,6 +1522,8 @@ export class TreeView extends HeightMap {
 		if (!this.context.options.alwaysFocused) {
 			DOM.addClass(this.domNode, 'focused');
 		}
+
+		this._onDOMFocus.fire();
 	}
 
 	private onBlur(): void {
@@ -1523,6 +1532,8 @@ export class TreeView extends HeightMap {
 		}
 
 		this.domNode.removeAttribute('aria-activedescendant'); // ARIA
+
+		this._onDOMBlur.fire();
 	}
 
 	// MS specific DOM Events
@@ -1617,6 +1628,9 @@ export class TreeView extends HeightMap {
 
 		this.viewListeners = Lifecycle.dispose(this.viewListeners);
 
+		this._onDOMFocus.dispose();
+		this._onDOMBlur.dispose();
+
 		if (this.domNode.parentNode) {
 			this.domNode.parentNode.removeChild(this.domNode);
 		}