ViewsViewlet: persistence, dnd

src/vs/base/browser/ui/splitview/panelview.ts

@@ -388,6 +388,16 @@ export class PanelView implements IDisposable {
 		this.splitview.resizeView(index, size);
 	}
 
+	getPanelSize(panel: Panel): number {
+		const index = firstIndex(this.panelItems, item => item.panel === panel);
+
+		if (index === -1) {
+			return -1;
+		}
+
+		return this.splitview.getViewSize(index);
+	}
+
 	layout(size: number): void {
 		this.splitview.layout(size);
 	}

src/vs/base/browser/ui/splitview/splitview2.ts

@@ -249,6 +249,14 @@ export class SplitView implements IDisposable {
 		}
 	}
 
+	getViewSize(index: number): number {
+		if (index < 0 || index >= this.viewItems.length) {
+			return -1;
+		}
+
+		return this.viewItems[index].size;
+	}
+
 	private resize(index: number, delta: number, sizes = this.viewItems.map(i => i.size)): void {
 		if (index < 0 || index >= this.viewItems.length) {
 			return;

src/vs/workbench/browser/parts/views/panelViewlet.ts

@@ -242,7 +242,6 @@ export class PanelViewlet extends Viewlet {
 			return;
 		}
 
-
 		const [panelItem] = this.panelItems.splice(fromIndex, 1);
 		this.panelItems.splice(toIndex, 0, panelItem);
 
@@ -253,6 +252,10 @@ export class PanelViewlet extends Viewlet {
 		this.panelview.resizePanel(panel, size);
 	}
 
+	getPanelSize(panel: ViewletPanel): number {
+		return this.panelview.getPanelSize(panel);
+	}
+
 	private updateViewHeaders(): void {
 		if (this.isSingleView()) {
 			this.panelItems[0].panel.setExpanded(true);

src/vs/workbench/browser/parts/views/treeView.ts

@@ -52,12 +52,12 @@ export class TreeView extends ViewsViewletPanel {
 		@IExtensionService private extensionService: IExtensionService,
 		@ICommandService private commandService: ICommandService
 	) {
-		super({ ...(options as IViewOptions), ariaHeaderLabel: options.name, collapsed: options.collapsed === void 0 ? true : options.collapsed }, keybindingService, contextMenuService);
+		super({ ...(options as IViewOptions), ariaHeaderLabel: options.name }, keybindingService, contextMenuService);
 		this.menus = this.instantiationService.createInstance(Menus, this.id);
 		this.viewFocusContext = this.contextKeyService.createKey<boolean>(this.id, void 0);
 		this.menus.onDidChangeTitle(() => this.updateActions(), this, this.disposables);
 		this.themeService.onThemeChange(() => this.tree.refresh() /* soft refresh */, this, this.disposables);
-		if (!options.collapsed) {
+		if (options.expanded) {
 			this.activate();
 		}
 	}
@@ -104,8 +104,8 @@ export class TreeView extends ViewsViewletPanel {
 				keyboardSupport: false
 			});
 
-		this.toDispose.push(attachListStyler(tree, this.themeService));
-		this.toDispose.push(this.listService.register(tree, [this.viewFocusContext]));
+		this.disposables.push(attachListStyler(tree, this.themeService));
+		this.disposables.push(this.listService.register(tree, [this.viewFocusContext]));
 		tree.addListener('selection', (event: any) => this.onSelection());
 		return tree;
 	}

src/vs/workbench/browser/parts/views/viewsViewlet.ts

@@ -13,6 +13,7 @@ import { dispose, IDisposable } from 'vs/base/common/lifecycle';
 import { IAction, IActionRunner } from 'vs/base/common/actions';
 import { IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
 import { ITree } from 'vs/base/parts/tree/browser/tree';
+import { firstIndex } from 'vs/base/common/arrays';
 import { DelayedDragHandler } from 'vs/base/browser/dnd';
 import { IExtensionService } from 'vs/platform/extensions/common/extensions';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -32,43 +33,20 @@ export interface IViewOptions extends IPanelOptions {
 	id: string;
 	name: string;
 	actionRunner: IActionRunner;
-	collapsed: boolean;
 }
 
 export interface IViewConstructorSignature<T extends ViewsViewletPanel> {
 	new(options: IViewOptions, ...services: { _serviceBrand: any; }[]): T;
 }
 
-// export interface IViewletView extends IThemable {
-// 	id: string;
-// 	name: string;
-// 	// getHeaderElement(): HTMLElement;
-// 	// setVisible(visible: boolean): TPromise<void>;
-// 	// isVisible(): boolean;
-// 	getActions(): IAction[];
-// 	getSecondaryActions(): IAction[];
-// 	getActionItem(action: IAction): IActionItem;
-// 	getActionsContext(): any;
-// 	// showHeader(): boolean;
-// 	// hideHeader(): boolean;
-// 	// focusBody(): void;
-// 	// isExpanded(): boolean;
-// 	// expand(): void;
-// 	// collapse(): void;
-// 	// getOptimalWidth(): number;
-
-// 	// TODO@joao this should not be part of this
-// 	create(): TPromise<void>;
-// 	shutdown(): void;
-// }
-
 export abstract class ViewsViewletPanel extends ViewletPanel {
 
 	readonly id: string;
 	readonly name: string;
 	protected treeContainer: HTMLElement;
+
+	// TODO@sandeep why is tree here? isn't this coming only from TreeView
 	protected tree: ITree;
-	protected toDispose: IDisposable[];
 	protected isDisposed: boolean;
 	private _isVisible: boolean;
 	private dragHandler: DelayedDragHandler;
@@ -79,17 +57,10 @@ export abstract class ViewsViewletPanel extends ViewletPanel {
 		protected contextMenuService: IContextMenuService
 	) {
 		super(options.name, options, keybindingService, contextMenuService);
-		// {
-		// 	ariaHeaderLabel: options.ariaHeaderLabel,
-
-		// 	// sizing: options.sizing,
-		// 	// bodySize: options.initialBodySize ? options.initialBodySize : 4 * 22,
-		// 	// initialState: options.collapsed ? CollapsibleState.COLLAPSED : CollapsibleState.EXPANDED,
-		// });
 
 		this.id = options.id;
 		this.name = options.name;
-		this.toDispose = [];
+		this._expanded = options.expanded;
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -187,7 +158,6 @@ export abstract class ViewsViewletPanel extends ViewletPanel {
 			this.dragHandler.dispose();
 		}
 
-		this.toDispose = dispose(this.toDispose);
 		super.dispose();
 	}
 
@@ -267,14 +237,6 @@ export class ViewsViewlet extends PanelViewlet {
 	async create(parent: Builder): TPromise<void> {
 		super.create(parent);
 
-		// TODO
-		// this._register(this.splitView.onDidOrderChange(() => {
-		// 	const views = this.viewPanelItems;
-		// 	for (let order = 0; order < views.length; order++) {
-		// 		this.viewsStates.get(views[order].id).order = order;
-		// 	}
-		// }));
-
 		this._register(ViewsRegistry.onViewsRegistered(this.onViewsRegistered, this));
 		this._register(ViewsRegistry.onViewsDeregistered(this.onViewsDeregistered, this));
 		this._register(this.contextKeyService.onDidChangeContext(keys => this.onContextChanged(keys)));
@@ -308,9 +270,21 @@ export class ViewsViewlet extends PanelViewlet {
 			.then(() => void 0);
 	}
 
+	private didLayout = false;
+
 	layout(dimension: Dimension): void {
 		super.layout(dimension);
 
+		if (!this.didLayout) {
+			this.didLayout = true;
+
+			for (const panel of this.viewsViewletPanels) {
+				const viewState = this.viewsStates.get(panel.id);
+				const size = viewState ? viewState.size : 200;
+				this.resizePanel(panel, size);
+			}
+		}
+
 		for (const view of this.viewsViewletPanels) {
 			let viewState = this.updateViewStateSize(view);
 			this.viewsStates.set(view.id, viewState);
@@ -433,12 +407,12 @@ export class ViewsViewlet extends PanelViewlet {
 						id: viewDescriptor.id,
 						name: viewDescriptor.name,
 						actionRunner: this.getActionRunner(),
-						collapsed: viewState ? viewState.collapsed : void 0,
+						expanded: !(viewState ? viewState.collapsed : void 0),
 						viewletSettings: this.viewletSettings
 					});
 				toCreate.push(view);
 
-				this.addPanel(view, 200, index);
+				this.addPanel(view, viewState ? viewState.size : 200, index);
 				this.viewsViewletPanels.splice(index, 0, view);
 			}
 
@@ -450,6 +424,28 @@ export class ViewsViewlet extends PanelViewlet {
 		return TPromise.as([]);
 	}
 
+	movePanel(from: ViewletPanel, to: ViewletPanel): void {
+		const fromIndex = firstIndex(this.viewsViewletPanels, panel => panel === from);
+		const toIndex = firstIndex(this.viewsViewletPanels, panel => panel === to);
+
+		if (fromIndex < 0 || fromIndex >= this.viewsViewletPanels.length) {
+			return;
+		}
+
+		if (toIndex < 0 || toIndex >= this.viewsViewletPanels.length) {
+			return;
+		}
+
+		super.movePanel(from, to);
+
+		const [panel] = this.viewsViewletPanels.splice(fromIndex, 1);
+		this.viewsViewletPanels.splice(toIndex, 0, panel);
+
+		for (let order = 0; order < this.viewsViewletPanels.length; order++) {
+			this.viewsStates.get(this.viewsViewletPanels[order].id).order = order;
+		}
+	}
+
 	protected getDefaultViewSize(): number | undefined {
 		return undefined;
 	}
@@ -565,7 +561,7 @@ export class ViewsViewlet extends PanelViewlet {
 	protected createViewState(view: ViewsViewletPanel): IViewState {
 		return {
 			collapsed: !view.isExpanded(),
-			size: undefined,
+			size: this.getPanelSize(view),
 			isHidden: false,
 			order: this.viewsViewletPanels.indexOf(view)
 		};
@@ -602,9 +598,9 @@ export class PersistentViewsViewlet extends ViewsViewlet {
 		const registeredViewDescriptors = this.getViewDescriptorsFromRegistry();
 		this.viewsStates.forEach((viewState, id) => {
 			const view = this.getView(id);
+
 			if (view) {
-				viewState = this.createViewState(view);
-				viewsStates[id] = { size: viewState.size, collapsed: viewState.collapsed, isHidden: viewState.isHidden, order: viewState.order };
+				viewsStates[id] = this.createViewState(view);
 			} else {
 				const viewDescriptor = registeredViewDescriptors.filter(v => v.id === id)[0];
 				if (viewDescriptor) {

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

@@ -97,8 +97,8 @@ export class VariablesView extends ViewsViewletPanel {
 				keyboardSupport: false
 			});
 
-		this.toDispose.push(attachListStyler(this.tree, this.themeService));
-		this.toDispose.push(this.listService.register(this.tree, [this.variablesFocusedContext]));
+		this.disposables.push(attachListStyler(this.tree, this.themeService));
+		this.disposables.push(this.listService.register(this.tree, [this.variablesFocusedContext]));
 
 		const viewModel = this.debugService.getViewModel();
 
@@ -107,7 +107,7 @@ export class VariablesView extends ViewsViewletPanel {
 		const collapseAction = this.instantiationService.createInstance(CollapseAction, this.tree, false, 'explorer-action collapse-explorer');
 		this.toolbar.setActions(prepareActions([collapseAction]))();
 
-		this.toDispose.push(viewModel.onDidFocusStackFrame(sf => {
+		this.disposables.push(viewModel.onDidFocusStackFrame(sf => {
 			// Refresh the tree immediately if it is not visible.
 			// Otherwise postpone the refresh until user stops stepping.
 			if (!this.tree.getContentHeight() || sf.explicit) {
@@ -116,11 +116,11 @@ export class VariablesView extends ViewsViewletPanel {
 				this.onFocusStackFrameScheduler.schedule();
 			}
 		}));
-		this.toDispose.push(this.debugService.onDidChangeState(state => {
+		this.disposables.push(this.debugService.onDidChangeState(state => {
 			collapseAction.enabled = state === State.Running || state === State.Stopped;
 		}));
 
-		this.toDispose.push(this.debugService.getViewModel().onDidSelectExpression(expression => {
+		this.disposables.push(this.debugService.getViewModel().onDidSelectExpression(expression => {
 			if (!expression || !(expression instanceof Variable)) {
 				return;
 			}
@@ -163,7 +163,7 @@ export class WatchExpressionsView extends ViewsViewletPanel {
 		super({ ...(options as IViewOptions), ariaHeaderLabel: nls.localize('expressionsSection', "Expressions Section") }, keybindingService, contextMenuService);
 		this.settings = options.viewletSettings;
 
-		this.toDispose.push(this.debugService.getModel().onDidChangeWatchExpressions(we => {
+		this.disposables.push(this.debugService.getModel().onDidChangeWatchExpressions(we => {
 			// only expand when a new watch expression is added.
 			if (we instanceof Expression) {
 				this.setExpanded(true);
@@ -195,8 +195,8 @@ export class WatchExpressionsView extends ViewsViewletPanel {
 				keyboardSupport: false
 			});
 
-		this.toDispose.push(attachListStyler(this.tree, this.themeService));
-		this.toDispose.push(this.listService.register(this.tree, [this.watchExpressionsFocusedContext]));
+		this.disposables.push(attachListStyler(this.tree, this.themeService));
+		this.disposables.push(this.listService.register(this.tree, [this.watchExpressionsFocusedContext]));
 
 		this.tree.setInput(this.debugService.getModel());
 
@@ -205,14 +205,14 @@ export class WatchExpressionsView extends ViewsViewletPanel {
 		const removeAllWatchExpressionsAction = this.instantiationService.createInstance(RemoveAllWatchExpressionsAction, RemoveAllWatchExpressionsAction.ID, RemoveAllWatchExpressionsAction.LABEL);
 		this.toolbar.setActions(prepareActions([addWatchExpressionAction, collapseAction, removeAllWatchExpressionsAction]))();
 
-		this.toDispose.push(this.debugService.getModel().onDidChangeWatchExpressions(we => {
+		this.disposables.push(this.debugService.getModel().onDidChangeWatchExpressions(we => {
 			if (!this.onWatchExpressionsUpdatedScheduler.isScheduled()) {
 				this.onWatchExpressionsUpdatedScheduler.schedule();
 			}
 			this.toReveal = we;
 		}));
 
-		this.toDispose.push(this.debugService.getViewModel().onDidSelectExpression(expression => {
+		this.disposables.push(this.debugService.getViewModel().onDidSelectExpression(expression => {
 			if (!expression || !(expression instanceof Expression)) {
 				return;
 			}
@@ -308,10 +308,10 @@ export class CallStackView extends ViewsViewletPanel {
 				keyboardSupport: false
 			});
 
-		this.toDispose.push(attachListStyler(this.tree, this.themeService));
-		this.toDispose.push(this.listService.register(this.tree));
+		this.disposables.push(attachListStyler(this.tree, this.themeService));
+		this.disposables.push(this.listService.register(this.tree));
 
-		this.toDispose.push(this.tree.addListener('selection', event => {
+		this.disposables.push(this.tree.addListener('selection', event => {
 			if (event && event.payload && event.payload.origin === 'keyboard') {
 				const element = this.tree.getFocus();
 				if (element instanceof ThreadAndProcessIds) {
@@ -322,12 +322,12 @@ export class CallStackView extends ViewsViewletPanel {
 			}
 		}));
 
-		this.toDispose.push(this.debugService.getModel().onDidChangeCallStack(() => {
+		this.disposables.push(this.debugService.getModel().onDidChangeCallStack(() => {
 			if (!this.onCallStackChangeScheduler.isScheduled()) {
 				this.onCallStackChangeScheduler.schedule();
 			}
 		}));
-		this.toDispose.push(this.debugService.getViewModel().onDidFocusStackFrame(() =>
+		this.disposables.push(this.debugService.getViewModel().onDidFocusStackFrame(() =>
 			this.updateTreeSelection().done(undefined, errors.onUnexpectedError)));
 
 		// Schedule the update of the call stack tree if the viewlet is opened after a session started #14684
@@ -393,9 +393,10 @@ export class BreakpointsView extends ViewsViewletPanel {
 			ariaHeaderLabel: nls.localize('breakpointsSection', "Breakpoints Section")
 		}, keybindingService, contextMenuService);
 
+		this.minimumBodySize = this.maximumBodySize = 0;
 		this.settings = options.viewletSettings;
 		this.breakpointsFocusedContext = CONTEXT_BREAKPOINTS_FOCUSED.bindTo(contextKeyService);
-		this.toDispose.push(this.debugService.getModel().onDidChangeBreakpoints(() => this.onBreakpointsChange()));
+		this.disposables.push(this.debugService.getModel().onDidChangeBreakpoints(() => this.onBreakpointsChange()));
 	}
 
 	public renderBody(container: HTMLElement): void {
@@ -442,10 +443,10 @@ export class BreakpointsView extends ViewsViewletPanel {
 				keyboardSupport: false
 			});
 
-		this.toDispose.push(attachListStyler(this.tree, this.themeService));
-		this.toDispose.push(this.listService.register(this.tree, [this.breakpointsFocusedContext]));
+		this.disposables.push(attachListStyler(this.tree, this.themeService));
+		this.disposables.push(this.listService.register(this.tree, [this.breakpointsFocusedContext]));
 
-		this.toDispose.push(this.tree.addListener('selection', event => {
+		this.disposables.push(this.tree.addListener('selection', event => {
 			if (event && event.payload && event.payload.origin === 'keyboard') {
 				const element = this.tree.getFocus();
 				if (element instanceof Breakpoint) {
@@ -458,7 +459,7 @@ export class BreakpointsView extends ViewsViewletPanel {
 
 		this.tree.setInput(debugModel);
 
-		this.toDispose.push(this.debugService.getViewModel().onDidSelectFunctionBreakpoint(fbp => {
+		this.disposables.push(this.debugService.getViewModel().onDidSelectFunctionBreakpoint(fbp => {
 			if (!fbp || !(fbp instanceof FunctionBreakpoint)) {
 				return;
 			}

src/vs/workbench/parts/extensions/electron-browser/extensionsViews.ts

@@ -67,7 +67,7 @@ export class ExtensionsListView extends ViewsViewletPanel {
 		@ITelemetryService private telemetryService: ITelemetryService,
 		@IProgressService private progressService: IProgressService
 	) {
-		super({ ...(options as IViewOptions), ariaHeaderLabel: options.name, collapsed: !!options.collapsed }, keybindingService, contextMenuService);
+		super({ ...(options as IViewOptions), ariaHeaderLabel: options.name }, keybindingService, contextMenuService);
 	}
 
 	renderHeader(container: HTMLElement): void {

src/vs/workbench/parts/files/browser/views/explorerView.ts

@@ -137,7 +137,7 @@ export class ExplorerView extends ViewsViewletPanel {
 			titleElement.title = title;
 		};
 
-		this.toDispose.push(this.contextService.onDidChangeWorkspaceName(setHeader));
+		this.disposables.push(this.contextService.onDidChangeWorkspaceName(setHeader));
 		setHeader();
 	}
 
@@ -164,8 +164,8 @@ export class ExplorerView extends ViewsViewletPanel {
 			DOM.toggleClass(this.treeContainer, 'align-icons-and-twisties', fileIconTheme.hasFileIcons && !fileIconTheme.hasFolderIcons);
 		};
 
-		this.toDispose.push(this.themeService.onDidFileIconThemeChange(onFileIconThemeChange));
-		this.toDispose.push(this.contextService.onDidChangeWorkspaceFolders(() => this.refreshFromEvent()));
+		this.disposables.push(this.themeService.onDidFileIconThemeChange(onFileIconThemeChange));
+		this.disposables.push(this.contextService.onDidChangeWorkspaceFolders(() => this.refreshFromEvent()));
 		onFileIconThemeChange(this.themeService.getFileIconTheme());
 	}
 
@@ -196,10 +196,10 @@ export class ExplorerView extends ViewsViewletPanel {
 		return this.doRefresh().then(() => {
 
 			// When the explorer viewer is loaded, listen to changes to the editor input
-			this.toDispose.push(this.editorGroupService.onEditorsChanged(() => this.onEditorsChanged()));
+			this.disposables.push(this.editorGroupService.onEditorsChanged(() => this.onEditorsChanged()));
 
 			// Also handle configuration updates
-			this.toDispose.push(this.configurationService.onDidUpdateConfiguration(e => this.onConfigurationUpdated(this.configurationService.getConfiguration<IFilesConfiguration>(), true)));
+			this.disposables.push(this.configurationService.onDidUpdateConfiguration(e => this.onConfigurationUpdated(this.configurationService.getConfiguration<IFilesConfiguration>(), true)));
 		});
 	}
 
@@ -376,7 +376,7 @@ export class ExplorerView extends ViewsViewletPanel {
 	@memoize
 	private get model(): Model {
 		const model = this.instantiationService.createInstance(Model);
-		this.toDispose.push(model);
+		this.disposables.push(model);
 
 		return model;
 	}
@@ -386,9 +386,9 @@ export class ExplorerView extends ViewsViewletPanel {
 		const renderer = this.instantiationService.createInstance(FileRenderer, this.viewletState);
 		const controller = this.instantiationService.createInstance(FileController, this.viewletState);
 		const sorter = this.instantiationService.createInstance(FileSorter);
-		this.toDispose.push(sorter);
+		this.disposables.push(sorter);
 		this.filter = this.instantiationService.createInstance(FileFilter);
-		this.toDispose.push(this.filter);
+		this.disposables.push(this.filter);
 		const dnd = this.instantiationService.createInstance(FileDragAndDrop);
 		const accessibilityProvider = this.instantiationService.createInstance(FileAccessibilityProvider);
 
@@ -409,23 +409,23 @@ export class ExplorerView extends ViewsViewletPanel {
 			});
 
 		// Theme styler
-		this.toDispose.push(attachListStyler(this.explorerViewer, this.themeService));
+		this.disposables.push(attachListStyler(this.explorerViewer, this.themeService));
 
 		// Register to list service
-		this.toDispose.push(this.listService.register(this.explorerViewer, [this.explorerFocusedContext, this.filesExplorerFocusedContext]));
+		this.disposables.push(this.listService.register(this.explorerViewer, [this.explorerFocusedContext, this.filesExplorerFocusedContext]));
 
 		// Update Viewer based on File Change Events
-		this.toDispose.push(this.fileService.onAfterOperation(e => this.onFileOperation(e)));
-		this.toDispose.push(this.fileService.onFileChanges(e => this.onFileChanges(e)));
+		this.disposables.push(this.fileService.onAfterOperation(e => this.onFileOperation(e)));
+		this.disposables.push(this.fileService.onFileChanges(e => this.onFileChanges(e)));
 
 		// Update resource context based on focused element
-		this.toDispose.push(this.explorerViewer.addListener('focus', (e: { focus: FileStat }) => {
+		this.disposables.push(this.explorerViewer.addListener('focus', (e: { focus: FileStat }) => {
 			this.resourceContext.set(e.focus && e.focus.resource);
 			this.folderContext.set(e.focus && e.focus.isDirectory);
 		}));
 
 		// Open when selecting via keyboard
-		this.toDispose.push(this.explorerViewer.addListener('selection', event => {
+		this.disposables.push(this.explorerViewer.addListener('selection', event => {
 			if (event && event.payload && event.payload.origin === 'keyboard') {
 				const element = this.tree.getSelection();
 

src/vs/workbench/parts/files/browser/views/openEditorsView.ts

@@ -91,7 +91,7 @@ export class OpenEditorsView extends ViewsViewletPanel {
 		const count = dom.append(container, $('.count'));
 		this.dirtyCountElement = dom.append(count, $('.monaco-count-badge'));
 
-		this.toDispose.push((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => {
+		this.disposables.push((attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => {
 			const background = colors.badgeBackground ? colors.badgeBackground.toString() : null;
 			const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : null;
 			const border = colors.contrastBorder ? colors.contrastBorder.toString() : null;
@@ -142,20 +142,20 @@ export class OpenEditorsView extends ViewsViewletPanel {
 			});
 
 		// Theme styler
-		this.toDispose.push(attachListStyler(this.tree, this.themeService));
+		this.disposables.push(attachListStyler(this.tree, this.themeService));
 
 		// Register to list service
-		this.toDispose.push(this.listService.register(this.tree, [this.explorerFocusedContext, this.openEditorsFocusedContext]));
+		this.disposables.push(this.listService.register(this.tree, [this.explorerFocusedContext, this.openEditorsFocusedContext]));
 
 		// Open when selecting via keyboard
-		this.toDispose.push(this.tree.addListener('selection', event => {
+		this.disposables.push(this.tree.addListener('selection', event => {
 			if (event && event.payload && event.payload.origin === 'keyboard') {
 				controller.openEditor(this.tree.getFocus(), { pinned: false, sideBySide: false, preserveFocus: false });
 			}
 		}));
 
 		// Prevent collapsing of editor groups
-		this.toDispose.push(this.tree.addListener('item:collapsed', (event: IItemCollapseEvent) => {
+		this.disposables.push(this.tree.addListener('item:collapsed', (event: IItemCollapseEvent) => {
 			if (event.item && event.item.getElement() instanceof EditorGroup) {
 				setTimeout(() => this.tree.expand(event.item.getElement())); // unwind from callback
 			}
@@ -180,20 +180,20 @@ export class OpenEditorsView extends ViewsViewletPanel {
 	private registerListeners(): void {
 
 		// update on model changes
-		this.toDispose.push(this.model.onModelChanged(e => this.onEditorStacksModelChanged(e)));
+		this.disposables.push(this.model.onModelChanged(e => this.onEditorStacksModelChanged(e)));
 
 		// Also handle configuration updates
-		this.toDispose.push(this.configurationService.onDidUpdateConfiguration(e => this.onConfigurationUpdated(this.configurationService.getConfiguration<IFilesConfiguration>())));
+		this.disposables.push(this.configurationService.onDidUpdateConfiguration(e => this.onConfigurationUpdated(this.configurationService.getConfiguration<IFilesConfiguration>())));
 
 		// Handle dirty counter
-		this.toDispose.push(this.untitledEditorService.onDidChangeDirty(e => this.updateDirtyIndicator()));
-		this.toDispose.push(this.textFileService.models.onModelsDirty(e => this.updateDirtyIndicator()));
-		this.toDispose.push(this.textFileService.models.onModelsSaved(e => this.updateDirtyIndicator()));
-		this.toDispose.push(this.textFileService.models.onModelsSaveError(e => this.updateDirtyIndicator()));
-		this.toDispose.push(this.textFileService.models.onModelsReverted(e => this.updateDirtyIndicator()));
+		this.disposables.push(this.untitledEditorService.onDidChangeDirty(e => this.updateDirtyIndicator()));
+		this.disposables.push(this.textFileService.models.onModelsDirty(e => this.updateDirtyIndicator()));
+		this.disposables.push(this.textFileService.models.onModelsSaved(e => this.updateDirtyIndicator()));
+		this.disposables.push(this.textFileService.models.onModelsSaveError(e => this.updateDirtyIndicator()));
+		this.disposables.push(this.textFileService.models.onModelsReverted(e => this.updateDirtyIndicator()));
 
 		// We are not updating the tree while the viewlet is not visible. Thus refresh when viewlet becomes visible #6702
-		this.toDispose.push(this.viewletService.onDidViewletOpen(viewlet => {
+		this.disposables.push(this.viewletService.onDidViewletOpen(viewlet => {
 			if (viewlet.getId() === VIEWLET_ID) {
 				this.fullRefreshNeeded = true;
 				this.structuralTreeUpdate();