add sort by position, name, kind

src/vs/base/common/actions.ts

@@ -5,7 +5,7 @@
 'use strict';
 
 import { TPromise } from 'vs/base/common/winjs.base';
-import { IDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 import { Event, Emitter } from 'vs/base/common/event';
 
 export interface ITelemetryData {
@@ -237,3 +237,26 @@ export class ActionRunner implements IActionRunner {
 		this._onDidRun.dispose();
 	}
 }
+
+export class RadioGroup {
+
+	private _disposable: IDisposable;
+
+	constructor(readonly actions: Action[]) {
+		this._disposable = combinedDisposable(actions.map(action => {
+			return action.onDidChange(e => {
+				if (e.checked && action.checked) {
+					for (const candidate of actions) {
+						if (candidate !== action) {
+							candidate.checked = false;
+						}
+					}
+				}
+			});
+		}));
+	}
+
+	dispose(): void {
+		this._disposable.dispose();
+	}
+}

src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts

@@ -26,8 +26,9 @@ import { IViewOptions, ViewsViewletPanel } from 'vs/workbench/browser/parts/view
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
 import { OneOutline, OutlineItem, getOutline } from './outlineModel';
-import { OutlineDataSource, OutlineRenderer, OutlineItemComparator, OutlineItemFilter } from './outlineTree';
+import { OutlineDataSource, OutlineRenderer, OutlineItemComparator, OutlineItemFilter, OutlineItemCompareType } from './outlineTree';
 import { localize } from '../../../../nls';
+import { IAction, Action, RadioGroup } from 'vs/base/common/actions';
 
 class ActiveEditorOracle {
 
@@ -65,6 +66,23 @@ class ActiveEditorOracle {
 	}
 }
 
+class ChangeSortAction extends Action {
+
+	private static _labels = {
+		[OutlineItemCompareType.ByPosition]: localize('sortByPosition', "Sort By Position"),
+		[OutlineItemCompareType.ByName]: localize('sortByName', "Sort By Name"),
+		[OutlineItemCompareType.ByKind]: localize('sortByKind', "Sort By Type"),
+	};
+
+	constructor(type: OutlineItemCompareType, callback: (type: OutlineItemCompareType) => any) {
+		super(String(type), ChangeSortAction._labels[type], null, true, () => {
+			this.checked = true;
+			callback(type);
+			return undefined;
+		});
+	}
+}
+
 export class OutlinePanel extends ViewsViewletPanel {
 
 	private readonly _disposables = new Array<IDisposable>();
@@ -126,6 +144,23 @@ export class OutlinePanel extends ViewsViewletPanel {
 		return super.setVisible(visible);
 	}
 
+	getSecondaryActions(): IAction[] {
+		let group = new RadioGroup([
+			new ChangeSortAction(OutlineItemCompareType.ByPosition, type => this._onSortTypeChanged(type)),
+			new ChangeSortAction(OutlineItemCompareType.ByName, type => this._onSortTypeChanged(type)),
+			new ChangeSortAction(OutlineItemCompareType.ByKind, type => this._onSortTypeChanged(type)),
+		]);
+		group.actions[0].checked = true; // todo@joh persist/restore setting
+		return group.actions;
+	}
+
+	private _onSortTypeChanged(type: OutlineItemCompareType) {
+		if (this._treeComparator.type !== type) {
+			this._treeComparator.type = type;
+			this._tree.refresh(undefined, true);
+		}
+	}
+
 	private _onEditor(editor: ICodeEditor): void {
 		dispose(this._editorDisposables);
 		this._editorDisposables = new Array();
@@ -135,9 +170,8 @@ export class OutlinePanel extends ViewsViewletPanel {
 			return;
 		}
 
-		// todo@joh cancellation
 		// todo@joh show pending...
-		getOutline(editor.getModel()).then(outline => {
+		const promise = getOutline(editor.getModel()).then(outline => {
 			let model = <OneOutline>this._tree.getInput();
 			let [first] = outline;
 			if (!first) {
@@ -154,6 +188,7 @@ export class OutlinePanel extends ViewsViewletPanel {
 			this._input.enable();
 
 			this._editorDisposables.push(this._input.onDidChange(query => {
+				//todo@joh `updateFilter` should return the best match and it should be focused already
 				model.updateFilter(query);
 				this._tree.refresh(undefined, true);
 			}));
@@ -169,7 +204,14 @@ export class OutlinePanel extends ViewsViewletPanel {
 			}));
 
 		}, err => {
+			//todo@joh have an error screen
 			console.error(err);
 		});
+
+		this._editorDisposables.push({
+			dispose() {
+				promise.cancel();
+			}
+		});
 	}
 }

src/vs/workbench/parts/outline/electron-browser/outlineTree.ts

@@ -14,9 +14,27 @@ import { OneOutline, OutlineItem } from './outlineModel';
 import { HighlightedLabel } from '../../../../base/browser/ui/highlightedlabel/highlightedLabel';
 import { createMatches } from '../../../../base/common/filters';
 
+
+export enum OutlineItemCompareType {
+	ByPosition,
+	ByName,
+	ByKind
+}
+
 export class OutlineItemComparator implements ISorter {
+
+	type: OutlineItemCompareType = OutlineItemCompareType.ByPosition;
+
 	compare(tree: ITree, a: OutlineItem, b: OutlineItem): number {
-		return Range.compareRangesUsingStarts(a.symbol.location.range, b.symbol.location.range);
+		switch (this.type) {
+			case OutlineItemCompareType.ByKind:
+				return a.symbol.kind - b.symbol.kind;
+			case OutlineItemCompareType.ByName:
+				return a.symbol.name.localeCompare(b.symbol.name);
+			case OutlineItemCompareType.ByPosition:
+			default:
+				return Range.compareRangesUsingStarts(a.symbol.location.range, b.symbol.location.range);
+		}
 	}
 }
 
@@ -82,7 +100,7 @@ export class OutlineRenderer implements IRenderer {
 	}
 
 	renderElement(tree: ITree, element: OutlineItem, templateId: string, template: OutlineItemTemplate): void {
-		template.icon.classList.add(symbolKindToCssClass((<OutlineItem>element).symbol.kind));
+		template.icon.className = `outline-element-icon symbol-icon ${symbolKindToCssClass(element.symbol.kind)}`;
 		template.label.set(element.symbol.name, element.matches ? createMatches(element.matches[1]) : []);
 	}