open editors view: use a list

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

@@ -108,7 +108,9 @@ export class BreakpointsView extends ViewsViewletPanel {
 	}
 
 	protected layoutBody(size: number): void {
-		this.list.layout(size);
+		if (this.list) {
+			this.list.layout(size);
+		}
 	}
 
 	private onListContextMenu(e: IListContextMenuEvent<IEnablement>): void {

src/vs/workbench/parts/files/electron-browser/explorerViewlet.ts

@@ -271,7 +271,7 @@ export class ExplorerViewlet extends PersistentViewsViewlet implements IExplorer
 			return false;
 		}
 
-		if (view instanceof ExplorerView || view instanceof OpenEditorsView) {
+		if (view instanceof ExplorerView) {
 			const viewer = view.getViewer();
 			if (!viewer) {
 				return false;
@@ -280,6 +280,9 @@ export class ExplorerViewlet extends PersistentViewsViewlet implements IExplorer
 			return !!viewer.getFocus() || (viewer.getSelection() && viewer.getSelection().length > 0);
 
 		}
+		if (view instanceof OpenEditorsView && !!view.getList()) {
+			return view.getList().isDOMFocused();
+		}
 
 		return false;
 	}

src/vs/workbench/parts/files/electron-browser/fileActions.ts

@@ -1141,7 +1141,9 @@ export class OpenToSideAction extends Action {
 	public run(): TPromise<any> {
 
 		// Remove highlight
-		this.tree.clearHighlight();
+		if (this.tree) {
+			this.tree.clearHighlight();
+		}
 
 		// Set side input
 		return this.editorService.openEditor({
@@ -1713,7 +1715,7 @@ export class FocusOpenEditorsView extends Action {
 			const openEditorsView = viewlet.getOpenEditorsView();
 			if (openEditorsView) {
 				openEditorsView.setExpanded(true);
-				openEditorsView.getViewer().DOMFocus();
+				openEditorsView.getList().domFocus();
 			}
 		});
 	}

src/vs/workbench/parts/files/electron-browser/fileCommands.ts

@@ -174,21 +174,22 @@ export function withFocusedFilesExplorer(accessor: ServicesAccessor): TPromise<{
 	});
 }
 
-function withFocusedOpenEditorsViewItem(accessor: ServicesAccessor): TPromise<{ explorer: ExplorerViewlet, tree: ITree, item: OpenEditor }> {
+function withFocusedOpenEditorsViewItem(accessor: ServicesAccessor): TPromise<{ explorer: ExplorerViewlet, item: OpenEditor }> {
 	return withVisibleExplorer(accessor).then(explorer => {
-		if (!explorer || !explorer.getOpenEditorsView()) {
+		if (!explorer || !explorer.getOpenEditorsView() || !explorer.getOpenEditorsView().getList()) {
 			return void 0; // empty folder or hidden explorer
 		}
 
-		const tree = explorer.getOpenEditorsView().getViewer();
+		const list = explorer.getOpenEditorsView().getList();
 
 		// Ignore if in highlight mode or not focused
-		const focus = tree.getFocus();
-		if (tree.getHighlight() || !tree.isDOMFocused() || !(focus instanceof OpenEditor)) {
+		const focused = list.getFocusedElements();
+		const focus = focused.length ? focused[0] : undefined;
+		if (!list.isDOMFocused() || !(focus instanceof OpenEditor)) {
 			return void 0;
 		}
 
-		return { explorer, tree, item: focus };
+		return { explorer, item: focus };
 	});
 }
 

src/vs/workbench/parts/files/electron-browser/media/explorerviewlet.css

@@ -41,11 +41,12 @@
 	flex: 0; /* do not steal space when label is hidden because we are in edit mode */
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row {
+	padding-left: 22px;
 	display: flex;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content > .monaco-action-bar {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .monaco-action-bar {
 	visibility: hidden;
 }
 
@@ -106,32 +107,32 @@
 	display: none;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row:hover > .content .monaco-action-bar,
-.explorer-viewlet .explorer-open-editors .monaco-tree.focused .monaco-tree-row.focused > .content .monaco-action-bar,
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content.dirty > .monaco-action-bar {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row:hover > .monaco-action-bar,
+.explorer-viewlet .explorer-open-editors .monaco-list.focused .monaco-list-row.focused > .monaco-action-bar,
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row.dirty > .monaco-action-bar {
 	visibility: visible;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content .monaco-action-bar .action-label {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-label {
 	display: block;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content .monaco-action-bar .close-editor-action {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .monaco-action-bar .close-editor-action {
 	width: 8px;
 	height: 22px;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content .monaco-action-bar .action-close-all-files,
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content .monaco-action-bar .save-all {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-close-all-files,
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .monaco-action-bar .save-all {
 	width: 23px;
 	height: 22px;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content > .open-editor {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .open-editor {
 	flex: 1;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row > .content > .editor-group {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row > .editor-group {
 	flex: 1;
 }
 
@@ -169,7 +170,7 @@
 	height: 20px;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row .editor-group {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row .editor-group {
 	font-size: 11px;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -177,10 +178,10 @@
 }
 
 /* Bold font style does not go well with CJK fonts */
-.explorer-viewlet:lang(zh-Hans) .explorer-open-editors .monaco-tree .monaco-tree-row .editor-group,
-.explorer-viewlet:lang(zh-Hant) .explorer-open-editors .monaco-tree .monaco-tree-row .editor-group,
-.explorer-viewlet:lang(ja) .explorer-open-editors .monaco-tree .monaco-tree-row .editor-group,
-.explorer-viewlet:lang(ko) .explorer-open-editors .monaco-tree .monaco-tree-row .editor-group {
+.explorer-viewlet:lang(zh-Hans) .explorer-open-editors .monaco-list .monaco-list-row .editor-group,
+.explorer-viewlet:lang(zh-Hant) .explorer-open-editors .monaco-list .monaco-list-row .editor-group,
+.explorer-viewlet:lang(ja) .explorer-open-editors .monaco-list .monaco-list-row .editor-group,
+.explorer-viewlet:lang(ko) .explorer-open-editors .monaco-list .monaco-list-row .editor-group {
 	font-weight: normal;
 }
 

src/vs/workbench/parts/files/electron-browser/media/fileactions.css

@@ -104,20 +104,20 @@
 	background: url("action-close.svg") center center no-repeat;
 }
 
-.explorer-viewlet .explorer-open-editors .focused .monaco-tree-row.selected:not(.highlighted) > .content .close-editor-action {
+.explorer-viewlet .explorer-open-editors .focused .monaco-list-row.selected:not(.highlighted) .close-editor-action {
 	background: url("action-close-focus.svg") center center no-repeat;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row:not(:hover) > .content.dirty > .monaco-action-bar .close-editor-action {
+.explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .close-editor-action {
 	background: url("action-close-dirty.svg") center center no-repeat;
 }
 
-.vs-dark .explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row:not(:hover) > .content.dirty > .monaco-action-bar .close-editor-action,
-.hc-black .monaco-workbench .explorer-viewlet .explorer-open-editors .monaco-tree .monaco-tree-row:not(:hover) > .content.dirty > .monaco-action-bar .close-editor-action {
+.vs-dark .explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .close-editor-action,
+.hc-black .monaco-workbench .explorer-viewlet .explorer-open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .close-editor-action {
 	background: url("action-close-dirty-dark.svg") center center no-repeat;
 }
 
-.explorer-viewlet .explorer-open-editors .monaco-tree.focused .monaco-tree-row.selected:not(:hover) > .content.dirty > .monaco-action-bar .close-editor-action {
+.explorer-viewlet .explorer-open-editors .monaco-list.focused .monaco-list-row.selected.dirty:not(:hover) > .monaco-action-bar .close-editor-action {
 	background: url("action-close-dirty-focus.svg") center center no-repeat;
 }