#30120 Support for reordering views in side bar

src/vs/workbench/common/theme.ts

@@ -252,6 +252,12 @@ export const SIDE_BAR_TITLE_FOREGROUND = registerColor('sideBarTitle.foreground'
 	hc: SIDE_BAR_FOREGROUND
 }, nls.localize('sideBarTitleForeground', "Side bar title foreground color. The side bar is the container for views like explorer and search."));
 
+export const SIDE_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('sideBar.dropBackground', {
+	dark: Color.white.transparent(0.12),
+	light: Color.white.transparent(0.12),
+	hc: Color.white.transparent(0.12),
+}, nls.localize('sideBarDragAndDropBackground', "Drag and drop feedback color for the side bar sections. The color should have transparency so that the side bar sections can still shine through. The side bar is the container for views like explorer and search."));
+
 export const SIDE_BAR_SECTION_HEADER_BACKGROUND = registerColor('sideBarSectionHeader.background', {
 	dark: Color.fromHex('#808080').transparent(0.2),
 	light: Color.fromHex('#808080').transparent(0.2),

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

@@ -31,7 +31,7 @@ import { IStorageService, StorageScope } from 'vs/platform/storage/common/storag
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
-import { SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
+import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND, SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND } from 'vs/workbench/common/theme';
 import { contrastBorder } from 'vs/platform/theme/common/colorRegistry';
 
 export interface IViewOptions {
@@ -303,6 +303,8 @@ interface IViewState {
 
 	isHidden: boolean;
 
+	order: number;
+
 }
 
 export class ComposedViewsViewlet extends Viewlet {
@@ -351,7 +353,8 @@ export class ComposedViewsViewlet extends Viewlet {
 		super.create(parent);
 
 		this.viewletContainer = DOM.append(parent.getHTMLElement(), DOM.$(''));
-		this.splitView = this._register(new SplitView(this.viewletContainer));
+		this.splitView = this._register(new SplitView(this.viewletContainer/* , { canChangeOrderByDragAndDrop: true } */));
+		// this.attachSplitViewStyler(this.splitView);
 		this._register(this.splitView.onFocus((view: IView) => this.lastFocusedView = view));
 
 		return this.onViewDescriptorsChanged()
@@ -428,7 +431,7 @@ export class ComposedViewsViewlet extends Viewlet {
 		if (this.splitView) {
 			this.splitView.layout(this.dimension.height);
 			for (const view of this.splitView.getViews<IView>()) {
-				let viewState = this.createViewState(view);
+				let viewState = this.updateViewStateSize(view);
 				this.viewsStates.set(view.id, viewState);
 			}
 		}
@@ -441,7 +444,7 @@ export class ComposedViewsViewlet extends Viewlet {
 			viewState = viewState || this.createViewState(view);
 			viewState.isHidden = true;
 		} else {
-			viewState = viewState || { collapsed: true, size: void 0, isHidden: false };
+			viewState = viewState || { collapsed: true, size: void 0, isHidden: false, order: void 0 };
 			viewState.isHidden = false;
 		}
 		this.viewsStates.set(id, viewState);
@@ -508,7 +511,7 @@ export class ComposedViewsViewlet extends Viewlet {
 				for (const view of this.splitView.getViews<IView>()) {
 					let viewState = this.viewsStates.get(view.id);
 					if (!viewState || view.size !== viewState.size || !view.isExpanded() !== viewState.collapsed) {
-						viewState = { ...this.createViewState(view), isHidden: viewState && viewState.isHidden };
+						viewState = this.updateViewStateSize(view);
 						this.viewsStates.set(view.id, viewState);
 						this.splitView.updateWeight(view, viewState.size);
 					}
@@ -535,7 +538,7 @@ export class ComposedViewsViewlet extends Viewlet {
 					});
 					toCreate.push(view);
 
-					this.attachHeaderViewStyler(view, this.themeService);
+					this.attachViewStyler(view);
 					this.splitView.addView(view, viewState && viewState.size ? Math.max(viewState.size, 1) : viewDescriptor.size, index);
 				}
 
@@ -546,14 +549,20 @@ export class ComposedViewsViewlet extends Viewlet {
 		return TPromise.as(null);
 	}
 
-	private attachHeaderViewStyler(widget: IThemable, themeService: IThemeService, options?: { noContrastBorder?: boolean }): IDisposable {
-		return attachStyler(themeService, {
+	private attachViewStyler(widget: IThemable, options?: { noContrastBorder?: boolean }): IDisposable {
+		return attachStyler(this.themeService, {
 			headerForeground: SIDE_BAR_SECTION_HEADER_FOREGROUND,
 			headerBackground: SIDE_BAR_SECTION_HEADER_BACKGROUND,
 			headerHighContrastBorder: (options && options.noContrastBorder) ? null : contrastBorder
 		}, widget);
 	}
 
+	protected attachSplitViewStyler(widget: IThemable): IDisposable {
+		return attachStyler(this.themeService, {
+			dropBackground: SIDE_BAR_DRAG_AND_DROP_BACKGROUND
+		}, widget);
+	}
+
 	private isCurrentlyVisible(viewDescriptor: IViewDescriptor): boolean {
 		return !!this.getView(viewDescriptor.id);
 	}
@@ -636,23 +645,34 @@ export class ComposedViewsViewlet extends Viewlet {
 	private getViewDescriptorsFromRegistry(): IViewDescriptor[] {
 		return ViewsRegistry.getViews(this.location)
 			.sort((a, b) => {
-				if (b.order === void 0 || b.order === null) {
+				const viewStateA = this.viewsStates.get(a.id);
+				const viewStateB = this.viewsStates.get(b.id);
+				const orderA = viewStateA ? viewStateA.order : a.order;
+				const orderB = viewStateB ? viewStateB.order : b.order;
+
+				if (orderB === void 0 || orderB === null) {
 					return -1;
 				}
-				if (a.order === void 0 || a.order === null) {
+				if (orderA === void 0 || orderA === null) {
 					return 1;
 				}
-				return a.order - b.order;
+				return orderA - orderB;
 			});
 	}
 
 	private saveViewsStates(): void {
 		const viewsStates = {};
+		const registeredViewDescriptors = this.getViewDescriptorsFromRegistry();
 		this.viewsStates.forEach((viewState, id) => {
 			const view = this.getView(id);
 			if (view) {
-				viewState = view ? this.createViewState(view) : viewState;
-				viewsStates[id] = { size: viewState.size, collapsed: viewState.collapsed, isHidden: viewState.isHidden };
+				viewState = this.createViewState(view);
+				viewsStates[id] = { size: viewState.size, collapsed: viewState.collapsed, isHidden: viewState.isHidden, order: viewState.order };
+			} else {
+				const viewDescriptor = registeredViewDescriptors.filter(v => v.id === id)[0];
+				if (viewDescriptor) {
+					viewsStates[id] = { size: void 0, collapsed: false, isHidden: viewState.isHidden, order: void 0 };
+				}
 			}
 		});
 
@@ -680,13 +700,20 @@ export class ComposedViewsViewlet extends Viewlet {
 		return this.splitView.getViews<IView>().filter(view => view.id === id)[0];
 	}
 
+	private updateViewStateSize(view: IView): IViewState {
+		const currentState = this.viewsStates.get(view.id);
+		const newViewState = this.createViewState(view);
+		return currentState ? { ...currentState, collapsed: newViewState.collapsed, size: newViewState.size } : newViewState;
+	}
+
 	private createViewState(view: IView): IViewState {
 		const collapsed = !view.isExpanded();
 		const size = collapsed && view instanceof CollapsibleView ? view.previousSize : view.size;
 		return {
 			collapsed,
 			size: size && size > 0 ? size : void 0,
-			isHidden: false
+			isHidden: false,
+			order: this.splitView.getViews<IView>().indexOf(view)
 		};
 	}
 }
\ No newline at end of file