proper tree twisties

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -3,11 +3,11 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./tree';
+import 'vs/css!./media/tree';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IListOptions, List, IIdentityProvider, IMultipleSelectionController, IListStyles } from 'vs/base/browser/ui/list/listWidget';
 import { IListVirtualDelegate, IListRenderer, IListMouseEvent, IListEvent, IListContextMenuEvent } from 'vs/base/browser/ui/list/list';
-import { append, $ } from 'vs/base/browser/dom';
+import { append, $, toggleClass } from 'vs/base/browser/dom';
 import { Event, Relay, chain } from 'vs/base/common/event';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
@@ -63,14 +63,6 @@ interface ITreeListTemplateData<T> {
 	templateData: T;
 }
 
-function renderDefaultTwistie<T>(node: ITreeNode<T, any>, twistie: HTMLElement): void {
-	if (node.children.length === 0 && !node.collapsible) {
-		twistie.innerText = '';
-	} else {
-		twistie.innerText = node.collapsed ? '▹' : '◢';
-	}
-}
-
 class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITreeNode<T, TFilterData>, ITreeListTemplateData<TTemplateData>> {
 
 	readonly templateId: string;
@@ -145,7 +137,12 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 			return;
 		}
 
-		renderDefaultTwistie(node, twistieElement);
+		TreeRenderer.renderDefaultTwistie(node, twistieElement);
+	}
+
+	private static renderDefaultTwistie<T>(node: ITreeNode<T, any>, twistie: HTMLElement): void {
+		toggleClass(twistie, 'collapsible', node.collapsible);
+		toggleClass(twistie, 'collapsed', node.collapsed);
 	}
 
 	dispose(): void {

src/vs/base/browser/ui/tree/media/collapsed-dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/media/collapsed-hc.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M6 4v8l4-4-4-4zm1 2.414l1.586 1.586-1.586 1.586v-3.172z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/media/collapsed.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/media/expanded-dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#E8E8E8" d="M11 10H5.344L11 4.414V10z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/media/expanded-hc.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#fff" d="M11 10.07h-5.656l5.656-5.656v5.656z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/media/expanded.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#646465" d="M11 10H5.344L11 4.414V10z"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/tree/tree.css → src/vs/base/browser/ui/tree/media/panelviewlet.css

@@ -3,23 +3,11 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-tl-row {
-	display: flex;
-	height: 100%;
-	align-items: center;
+.monaco-panel-view .panel > .panel-header h3.title {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	font-size: 11px;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
 }
-
-.monaco-tl-row > .monaco-tl-twistie,
-.monaco-tl-row > .monaco-tl-contents {
-	height: 100%;
-}
-
-.monaco-tl-row > .monaco-tl-twistie {
-	font-size: 10px;
-	text-align: right;
-	padding-right: 10px;
-}
-
-.monaco-tl-row > .monaco-tl-contents {
-	flex: 1;
-}
\ No newline at end of file

src/vs/base/browser/ui/tree/media/tree.css

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-tl-row {
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+.monaco-tl-twistie,
+.monaco-tl-contents {
+	height: 100%;
+}
+
+.monaco-tl-twistie {
+	font-size: 10px;
+	text-align: right;
+	margin-right: 6px;
+}
+
+.monaco-tl-contents {
+	flex: 1;
+}
+
+.monaco-tl-twistie.collapsible {
+	background-size: 16px;
+	background-position: 100% 50%;
+	background-repeat: no-repeat;
+	background-image: url("expanded.svg");
+}
+
+.monaco-tl-twistie.collapsible.collapsed {
+	display: inline-block;
+	background-image: url("collapsed.svg");
+}
+
+.vs-dark .monaco-tl-twistie.collapsible {
+	background-image: url("expanded-dark.svg");
+}
+
+.vs-dark .monaco-tl-twistie.collapsible.collapsed {
+	background-image: url("collapsed-dark.svg");
+}
+
+.hc-black .monaco-tl-twistie.collapsible {
+	background-image: url("expanded-hc.svg");
+}
+
+.hc-black .monaco-tl-twistie.collapsible.collapsed {
+	background-image: url("collapsed-hc.svg");
+}
\ No newline at end of file

src/vs/base/browser/ui/tree/objectTree.ts

@@ -3,7 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./tree';
 import { Iterator, ISequence } from 'vs/base/common/iterator';
 import { AbstractTree, ITreeOptions } from 'vs/base/browser/ui/tree/abstractTree';
 import { ISpliceable } from 'vs/base/common/sequence';