use divs for tree indent guides

fixes #75779
microsoft · Jun 24, 2019 · 8d1de35 · 8d1de35
1 parent 422fd46
commit 8d1de35
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 47 deletions.
diff --git a/src/vs/base/browser/ui/tree/abstractTree.ts b/src/vs/base/browser/ui/tree/abstractTree.ts
@@ -243,7 +243,7 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 	private indent: number = TreeRenderer.DefaultIndent;
 
 	private _renderIndentGuides: RenderIndentGuides = RenderIndentGuides.None;
-	private renderedIndentGuides = new SetMap<ITreeNode<T, TFilterData>, SVGLineElement>();
+	private renderedIndentGuides = new SetMap<ITreeNode<T, TFilterData>, HTMLDivElement>();
 	private activeParentNodes = new Set<ITreeNode<T, TFilterData>>();
 	private indentGuidesDisposable: IDisposable = Disposable.None;
 
@@ -312,7 +312,7 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 		this.renderTwistie(node, templateData);
 
 		if (typeof height === 'number') {
-			this.renderIndentGuides(node, templateData, height);
+			this.renderIndentGuides(node, templateData);
 		}
 
 		this.renderer.renderElement(node, index, templateData.templateData, height);
@@ -353,7 +353,7 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 		}
 
 		this.renderTwistie(node, data.templateData);
-		this.renderIndentGuides(node, data.templateData, data.height);
+		this.renderIndentGuides(node, data.templateData);
 	}
 
 	private renderTwistie(node: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>) {
@@ -371,51 +371,35 @@ class TreeRenderer<T, TFilterData, TTemplateData> implements IListRenderer<ITree
 		}
 	}
 
-	private renderIndentGuides(target: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>, height: number): void {
+	private renderIndentGuides(target: ITreeNode<T, TFilterData>, templateData: ITreeListTemplateData<TTemplateData>): void {
+		clearNode(templateData.indent);
+		templateData.indentGuidesDisposable.dispose();
+
 		if (this._renderIndentGuides === RenderIndentGuides.None) {
-			clearNode(templateData.indent);
 			return;
 		}
 
-		templateData.indentGuidesDisposable.dispose();
-
 		const disposableStore = new DisposableStore();
-		const width = this.indent * target.depth;
-		const virtualWidth = width * window.devicePixelRatio;
-		const virtualHeight = height * window.devicePixelRatio;
-
-		const svg = $.SVG('svg', {
-			preserveAspectRatio: 'none',
-			width: `${width}`,
-			height: `${height}`,
-			viewBox: `0 0 ${virtualWidth} ${virtualHeight}`
-		});
-
 		let node = target;
-		let i = 1;
 
 		while (node.parent && node.parent.parent) {
 			const parent = node.parent;
-			const x = Math.floor((target.depth - i - 1) * this.indent * window.devicePixelRatio) + 2.5;
-			const line = $.SVG<SVGLineElement>('line', { x1: x, y1: 0, x2: x, y2: virtualHeight });
+			const guide = $<HTMLDivElement>('.indent-guide', { style: `width: ${this.indent}px` });
 
 			if (this.activeParentNodes.has(parent)) {
-				addClass(line, 'active');
+				addClass(guide, 'active');
 			}
 
-			svg.appendChild(line);
+			if (templateData.indent.childElementCount === 0) {
+				templateData.indent.appendChild(guide);
+			} else {
+				templateData.indent.insertBefore(guide, templateData.indent.firstElementChild);
+			}
 
-			this.renderedIndentGuides.add(parent, line);
-			disposableStore.add(toDisposable(() => this.renderedIndentGuides.delete(parent, line)));
+			this.renderedIndentGuides.add(parent, guide);
+			disposableStore.add(toDisposable(() => this.renderedIndentGuides.delete(parent, guide)));
 
 			node = parent;
-			i++;
-		}
-
-		clearNode(templateData.indent);
-
-		if (svg.firstChild) {
-			templateData.indent.appendChild(svg);
 		}
 
 		templateData.indentGuidesDisposable = disposableStore;
@@ -1358,8 +1342,8 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
 		const content: string[] = [];
 
 		if (styles.treeIndentGuidesStroke) {
-			content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > svg > line, .monaco-list${suffix}.always .monaco-tl-indent > svg > line  { stroke: ${styles.treeIndentGuidesStroke.transparent(0.4)}; }`);
-			content.push(`.monaco-list${suffix} .monaco-tl-indent > svg > line.active { stroke: ${styles.treeIndentGuidesStroke}; }`);
+			content.push(`.monaco-list${suffix}:hover .monaco-tl-indent > .indent-guide, .monaco-list${suffix}.always .monaco-tl-indent > .indent-guide  { border-color: ${styles.treeIndentGuidesStroke.transparent(0.4)}; }`);
+			content.push(`.monaco-list${suffix} .monaco-tl-indent > .indent-guide.active { border-color: ${styles.treeIndentGuidesStroke}; }`);
 		}
 
 		const newStyles = content.join('\n');

diff --git a/src/vs/base/browser/ui/tree/media/tree.css b/src/vs/base/browser/ui/tree/media/tree.css
@@ -14,16 +14,23 @@
 	height: 100%;
 	position: absolute;
 	top: 0;
-	left: 14px;
+	left: 18px;
 	pointer-events: none;
 }
 
 .hide-arrows .monaco-tl-indent {
-	left: 10px;
+	left: 12px;
 }
 
-.monaco-tl-indent > svg {
-	overflow: visible;
+.monaco-tl-indent > .indent-guide {
+	display: inline-block;
+	box-sizing: border-box;
+	height: 100%;
+	border-left: 1px solid transparent;
+}
+
+.monaco-tl-indent > .indent-guide {
+	transition: border-color 0.1s linear;
 }
 
 .monaco-tl-twistie,
@@ -84,12 +91,3 @@
 .hc-black .monaco-tl-twistie.loading {
 	background-image: url("loading-hc.svg");
 }
-
-.monaco-list .monaco-tl-indent > svg {
-	height: 100%;
-}
-
-.monaco-list .monaco-tl-indent > svg > line {
-	stroke: transparent;
-	transition: stroke 0.1s linear;
-}