vscode/test/tree/public/index.html

<html>

<head>
	<meta charset="utf-8">
	<title>Tree</title>
	<style>
		#container {
			width: 400;
			height: 600;
			border: 1px solid black;
		}

		.monaco-scrollable-element>.scrollbar>.slider {
			background: rgba(100, 100, 100, .4);
		}

		.tl-contents {
			flex: 1;
		}

		.monaco-list-row:hover:not(.selected):not(.focused) {
			background: gainsboro !important;
		}
	</style>
</head>

<body>
	<input type="text" id="filter" />
	<button id="expandall">Expand All</button>
	<button id="collapseall">Collapse All</button>
	<button id="renderwidth">Render Width</button>
	<button id="refresh">Refresh</button>
	<div id="container"></div>

	<script src="/static/vs/loader.js"></script>
	<script>
		function perf(name, fn) {
			performance.mark('before ' + name);
			const start = performance.now();
			fn();
			console.log(name + ' took', performance.now() - start);
			performance.mark('after ' + name);
		}

		require.config({ baseUrl: '/static' });

		require(['vs/base/browser/ui/tree/indexTree', 'vs/base/browser/ui/tree/objectTree', 'vs/base/browser/ui/tree/asyncDataTree', 'vs/base/browser/ui/tree/dataTree', 'vs/base/browser/ui/tree/tree', 'vs/base/common/iterator'], ({ IndexTree }, { CompressibleObjectTree }, { AsyncDataTree }, { DataTree }, { TreeVisibility }, { iter }) => {
			function createIndexTree(opts) {
				opts = opts || {};

				const delegate = {
					getHeight() { return 22; },
					getTemplateId() { return 'template'; },
					hasDynamicHeight() { return true; }
				};

				const renderer = {
					templateId: 'template',
					renderTemplate(container) { return container; },
					renderElement(element, index, container) {
						if (opts.supportDynamicHeights) {
							let v = [];
							for (let i = 1; i <= 5; i++) {
								v.push(element.element);
							}
							container.innerHTML = v.join('<br />');
						} else {
							container.innerHTML = element.element;
						}
					},
					disposeElement() { },
					disposeTemplate() { }
				};

				const treeFilter = new class {
					constructor() {
						this.pattern = null;
						let timeout;
						filter.oninput = () => {
							clearTimeout(timeout);
							timeout = setTimeout(() => this.updatePattern(), 300);
						};
					}
					updatePattern() {
						if (!filter.value) {
							this.pattern = null;
						} else {
							this.pattern = new RegExp(filter.value, 'i');
						}

						perf('refilter', () => tree.refilter());
					}
					filter(el) {
						return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
					}
				};

				const tree = new IndexTree('test', container, delegate, [renderer], null, { ...opts, filter: treeFilter, setRowLineHeight: false });

				return { tree, treeFilter };
			}

			function createCompressedObjectTree(opts) {
				opts = opts || {};

				const delegate = {
					getHeight() { return 22; },
					getTemplateId() { return 'template'; },
					hasDynamicHeight() { return true; }
				};

				const renderer = {
					templateId: 'template',
					renderTemplate(container) { return container; },
					renderElement(element, index, container) {
						container.innerHTML = element.element.name;
					},
					renderCompressedElements(node, index, container, height) {
						container.innerHTML = `🙈 ${node.element.elements.map(el => el.name).join('/')}`;
					},
					disposeElement() { },
					disposeTemplate() { }
				};

				const treeFilter = new class {
					constructor() {
						this.pattern = null;
						let timeout;
						filter.oninput = () => {
							clearTimeout(timeout);
							timeout = setTimeout(() => this.updatePattern(), 300);
						};
					}
					updatePattern() {
						if (!filter.value) {
							this.pattern = null;
						} else {
							this.pattern = new RegExp(filter.value, 'i');
						}

						perf('refilter', () => tree.refilter());
					}
					filter(el) {
						return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
					}
				};

				const tree = new CompressibleObjectTree('test', container, delegate, [renderer], { ...opts, filter: treeFilter, setRowLineHeight: false, collapseByDefault: true, setRowLineHeight: true });

				return { tree, treeFilter };
			}

			function createAsyncDataTree() {
				const delegate = {
					getHeight() { return 22; },
					getTemplateId() { return 'template'; }
				};

				const renderer = {
					templateId: 'template',
					renderTemplate(container) { return container; },
					renderElement(node, index, container) { container.textContent = node.element.element.name; },
					disposeElement() { },
					disposeTemplate() { }
				};

				const treeFilter = new class {
					constructor() {
						this.pattern = null;
						let timeout;
						filter.oninput = () => {
							clearTimeout(timeout);
							timeout = setTimeout(() => this.updatePattern(), 300);
						};
					}

					updatePattern() {
						if (!filter.value) {
							this.pattern = null;
						} else {
							this.pattern = new RegExp(filter.value, 'i');
						}

						perf('refilter', () => tree.refilter());
					}
					filter(el) {
						return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
					}
				};

				const sorter = new class {
					compare(a, b) {
						if (a.collapsible === b.collapsible) {
							return a.name < b.name ? -1 : 1;
						}

						return a.collapsible ? -1 : 1;
					}
				};

				const dataSource = new class {
					hasChildren(element) {
						return element === null || element.element.type === 'dir';
					}
					getChildren(element) {
						return new Promise((c, e) => {
							const xhr = new XMLHttpRequest();
							xhr.open('GET', element ? `/api/readdir?path=${element.element.path}` : '/api/readdir');
							xhr.send();
							xhr.onreadystatechange = function () {
								if (this.readyState == 4 && this.status == 200) {
									const els = JSON.parse(this.responseText).map(element => ({
										element,
										collapsible: element.type === 'dir'
									}));

									c(els);
								}
							};
						});
					}
				}

				const identityProvider = {
					getId(node) {
						return node.element.path;
					}
				};

				const tree = new AsyncDataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, sorter, identityProvider });

				return { tree, treeFilter };
			}

			function createDataTree() {
				const delegate = {
					getHeight() { return 22; },
					getTemplateId() { return 'template'; }
				};

				const renderer = {
					templateId: 'template',
					renderTemplate(container) { return container; },
					renderElement(node, index, container) { container.textContent = node.element.name; },
					disposeElement() { },
					disposeTemplate() { }
				};

				const treeFilter = new class {
					constructor() {
						this.pattern = null;
						let timeout;
						filter.oninput = () => {
							clearTimeout(timeout);
							timeout = setTimeout(() => this.updatePattern(), 300);
						};
					}

					updatePattern() {
						if (!filter.value) {
							this.pattern = null;
						} else {
							this.pattern = new RegExp(filter.value, 'i');
						}

						perf('refilter', () => tree.refilter());
					}
					filter(el) {
						return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
					}
				};

				const dataSource = new class {
					getChildren(element) {
						return element.children || [];
					}
				};

				const identityProvider = {
					getId(node) {
						return node.name;
					}
				};

				const tree = new DataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, identityProvider });

				tree.setInput({
					children: [
						{ name: 'A', children: [{ name: 'AA' }, { name: 'AB' }] },
						{ name: 'B', children: [{ name: 'BA', children: [{ name: 'BAA' }] }, { name: 'BB' }] },
						{ name: 'C' }
					]
				});

				return { tree, treeFilter };
			}

			switch (location.search) {
				case '?problems': {
					const { tree, treeFilter } = createIndexTree();

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
					renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));

					const files = [];
					for (let i = 0; i < 100000; i++) {
						const errors = [];

						for (let j = 1; j <= 3; j++) {
							errors.push({ element: `error #${j} ` });
						}

						files.push({ element: `file #${i}`, children: errors });
					}

					perf('splice', () => tree.splice([0], 0, files));
					break;
				}
				case '?data': {
					const { tree, treeFilter } = createAsyncDataTree();

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
					renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
					refresh.onclick = () => perf('refresh', () => tree.updateChildren());

					tree.setInput(null);

					break;
				}
				case '?objectdata': {
					const { tree, treeFilter } = createDataTree();

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
					renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
					refresh.onclick = () => perf('refresh', () => tree.updateChildren());

					break;
				}
				case '?compressed': {
					const { tree, treeFilter } = createCompressedObjectTree();

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());

					const xhr = new XMLHttpRequest();
					xhr.open('GET', '/compressed.json');
					xhr.send();
					xhr.onreadystatechange = function () {
						if (this.readyState == 4 && this.status == 200) {
							tree.setChildren(null, JSON.parse(this.responseText));
						}
					};

					break;
				}
				case '?height': {
					const { tree, treeFilter } = createIndexTree({ supportDynamicHeights: true });

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
					renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));

					const xhr = new XMLHttpRequest();
					xhr.open('GET', '/api/ls?path=');
					xhr.send();
					xhr.onreadystatechange = function () {
						if (this.readyState == 4 && this.status == 200) {
							perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));
							treeFilter.updatePattern();
						}
					};

					// container.


					break;
				}
				default: {
					const { tree, treeFilter } = createIndexTree();

					expandall.onclick = () => perf('expand all', () => tree.expandAll());
					collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
					renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));

					const xhr = new XMLHttpRequest();
					xhr.open('GET', '/api/ls?path=');
					xhr.send();
					xhr.onreadystatechange = function () {
						if (this.readyState == 4 && this.status == 200) {
							perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));
							treeFilter.updatePattern();
						}
					};
				}
			}
		});
	</script>
</body>

</html>
first tree showcase 2018-06-23 22:09:45 +00:00			`<html>`

			`<head>`
			`<meta charset="utf-8">`
			`<title>Tree</title>`
			`<style>`
			`#container {`
			`width: 400;`
			`height: 600;`
			`border: 1px solid black;`
			`}`
tree: quick demo 2018-06-24 21:20:32 +00:00
			`.monaco-scrollable-element>.scrollbar>.slider {`
			`background: rgba(100, 100, 100, .4);`
			`}`
tree: fix expand/collapse 2018-08-10 21:15:27 +00:00
			`.tl-contents {`
			`flex: 1;`
			`}`
tree: twistie rendering participant 2018-10-04 07:37:19 +00:00
			`.monaco-list-row:hover:not(.selected):not(.focused) {`
			`background: gainsboro !important;`
			`}`
first tree showcase 2018-06-23 22:09:45 +00:00			`</style>`
			`</head>`

			`<body>`
tree: more filter testing 2018-09-26 20:16:35 +00:00			`<input type="text" id="filter" />`
tree model: recursive setCollapsed related to #64887 2018-12-14 11:17:43 +00:00			`<button id="expandall">Expand All</button>`
list view: request scrollable element on next animation frame 2018-09-26 20:56:54 +00:00			`<button id="collapseall">Collapse All</button>`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`<button id="renderwidth">Render Width</button>`
async data tree tests: add refresh button 2018-11-29 08:57:10 +00:00			`<button id="refresh">Refresh</button>`
first tree showcase 2018-06-23 22:09:45 +00:00			`<div id="container"></div>`

tree: quick demo 2018-06-24 21:20:32 +00:00			`<script src="/static/vs/loader.js"></script>`
first tree showcase 2018-06-23 22:09:45 +00:00			`<script>`
list view: request scrollable element on next animation frame 2018-09-26 20:56:54 +00:00			`function perf(name, fn) {`
			`performance.mark('before ' + name);`
			`const start = performance.now();`
			`fn();`
			`console.log(name + ' took', performance.now() - start);`
			`performance.mark('after ' + name);`
			`}`

tree: quick demo 2018-06-24 21:20:32 +00:00			`require.config({ baseUrl: '/static' });`
first tree showcase 2018-06-23 22:09:45 +00:00
fix manual tree tests 2019-09-09 13:09:47 +00:00			`require(['vs/base/browser/ui/tree/indexTree', 'vs/base/browser/ui/tree/objectTree', 'vs/base/browser/ui/tree/asyncDataTree', 'vs/base/browser/ui/tree/dataTree', 'vs/base/browser/ui/tree/tree', 'vs/base/common/iterator'], ({ IndexTree }, { CompressibleObjectTree }, { AsyncDataTree }, { DataTree }, { TreeVisibility }, { iter }) => {`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`function createIndexTree(opts) {`
			`opts = opts \|\| {};`

data tree: first steps 2018-10-03 14:25:30 +00:00			`const delegate = {`
			`getHeight() { return 22; },`
wip: list with dynamic height elements 2018-10-28 13:39:18 +00:00			`getTemplateId() { return 'template'; },`
			`hasDynamicHeight() { return true; }`
data tree: first steps 2018-10-03 14:25:30 +00:00			`};`

			`const renderer = {`
			`templateId: 'template',`
			`renderTemplate(container) { return container; },`
wip: list with dynamic height elements 2018-10-28 13:39:18 +00:00			`renderElement(element, index, container) {`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`if (opts.supportDynamicHeights) {`
			`let v = [];`
fix tree tests 2019-01-07 14:29:42 +00:00			`for (let i = 1; i <= 5; i++) {`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`v.push(element.element);`
			`}`
			`container.innerHTML = v.join('<br />');`
			`} else {`
			`container.innerHTML = element.element;`
			`}`
wip: list with dynamic height elements 2018-10-28 13:39:18 +00:00			`},`
:lipstick: 2018-10-04 06:39:16 +00:00			`disposeElement() { },`
data tree: first steps 2018-10-03 14:25:30 +00:00			`disposeTemplate() { }`
			`};`

			`const treeFilter = new class {`
			`constructor() {`
tree: more filter testing 2018-09-26 20:16:35 +00:00			`this.pattern = null;`
data tree: first steps 2018-10-03 14:25:30 +00:00			`let timeout;`
			`filter.oninput = () => {`
			`clearTimeout(timeout);`
			`timeout = setTimeout(() => this.updatePattern(), 300);`
			`};`
tree: more filter testing 2018-09-26 20:16:35 +00:00			`}`
data tree: first steps 2018-10-03 14:25:30 +00:00			`updatePattern() {`
			`if (!filter.value) {`
			`this.pattern = null;`
			`} else {`
			`this.pattern = new RegExp(filter.value, 'i');`
			`}`
tree: more filter testing 2018-09-26 20:16:35 +00:00
data tree: first steps 2018-10-03 14:25:30 +00:00			`perf('refilter', () => tree.refilter());`
			`}`
			`filter(el) {`
			`return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;`
			`}`
			`};`

fix manual tree tests 2019-09-09 13:09:47 +00:00			`const tree = new IndexTree('test', container, delegate, [renderer], null, { ...opts, filter: treeFilter, setRowLineHeight: false });`
data tree: first steps 2018-10-03 14:25:30 +00:00
			`return { tree, treeFilter };`
			`}`

first compressed object tree sample 2019-07-23 08:45:12 +00:00			`function createCompressedObjectTree(opts) {`
			`opts = opts \|\| {};`

			`const delegate = {`
			`getHeight() { return 22; },`
			`getTemplateId() { return 'template'; },`
			`hasDynamicHeight() { return true; }`
			`};`

			`const renderer = {`
			`templateId: 'template',`
			`renderTemplate(container) { return container; },`
			`renderElement(element, index, container) {`
fix manual tree tests 2019-09-09 13:09:47 +00:00			`container.innerHTML = element.element.name;`
			`},`
			`renderCompressedElements(node, index, container, height) {`
			container.innerHTML = `🙈 ${node.element.elements.map(el => el.name).join('/')}`;
first compressed object tree sample 2019-07-23 08:45:12 +00:00			`},`
			`disposeElement() { },`
			`disposeTemplate() { }`
			`};`

			`const treeFilter = new class {`
			`constructor() {`
			`this.pattern = null;`
			`let timeout;`
			`filter.oninput = () => {`
			`clearTimeout(timeout);`
			`timeout = setTimeout(() => this.updatePattern(), 300);`
			`};`
			`}`
			`updatePattern() {`
			`if (!filter.value) {`
			`this.pattern = null;`
			`} else {`
			`this.pattern = new RegExp(filter.value, 'i');`
			`}`

			`perf('refilter', () => tree.refilter());`
			`}`
			`filter(el) {`
			`return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;`
			`}`
			`};`

fix manual tree tests 2019-09-09 13:09:47 +00:00			`const tree = new CompressibleObjectTree('test', container, delegate, [renderer], { ...opts, filter: treeFilter, setRowLineHeight: false, collapseByDefault: true, setRowLineHeight: true });`
first compressed object tree sample 2019-07-23 08:45:12 +00:00
			`return { tree, treeFilter };`
			`}`

AsyncDataTree 2018-11-28 14:54:57 +00:00			`function createAsyncDataTree() {`
data tree: first steps 2018-10-03 14:25:30 +00:00			`const delegate = {`
			`getHeight() { return 22; },`
			`getTemplateId() { return 'template'; }`
			`};`

			`const renderer = {`
			`templateId: 'template',`
			`renderTemplate(container) { return container; },`
fix tree tests 2018-11-28 07:36:58 +00:00			`renderElement(node, index, container) { container.textContent = node.element.element.name; },`
:lipstick: 2018-10-04 06:39:16 +00:00			`disposeElement() { },`
data tree: first steps 2018-10-03 14:25:30 +00:00			`disposeTemplate() { }`
			`};`

			`const treeFilter = new class {`
			`constructor() {`
			`this.pattern = null;`
			`let timeout;`
			`filter.oninput = () => {`
			`clearTimeout(timeout);`
			`timeout = setTimeout(() => this.updatePattern(), 300);`
			`};`
			`}`

			`updatePattern() {`
			`if (!filter.value) {`
			`this.pattern = null;`
			`} else {`
			`this.pattern = new RegExp(filter.value, 'i');`
			`}`

			`perf('refilter', () => tree.refilter());`
			`}`
			`filter(el) {`
			`return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;`
			`}`
			`};`

add tree sorter fixes #63148 2018-12-14 14:35:28 +00:00			`const sorter = new class {`
			`compare(a, b) {`
			`if (a.collapsible === b.collapsible) {`
			`return a.name < b.name ? -1 : 1;`
			`}`

			`return a.collapsible ? -1 : 1;`
			`}`
			`};`

data tree: first steps 2018-10-03 14:25:30 +00:00			`const dataSource = new class {`
async data tree: preserve collapse state given identityProvider 2018-11-29 13:47:41 +00:00			`hasChildren(element) {`
			`return element === null \|\| element.element.type === 'dir';`
data tree: first steps 2018-10-03 14:25:30 +00:00			`}`
async data tree: preserve collapse state given identityProvider 2018-11-29 13:47:41 +00:00			`getChildren(element) {`
data tree: first steps 2018-10-03 14:25:30 +00:00			`return new Promise((c, e) => {`
			`const xhr = new XMLHttpRequest();`
fix manual tree tests 2019-09-09 13:09:47 +00:00			xhr.open('GET', element ? `/api/readdir?path=${element.element.path}` : '/api/readdir');
data tree: first steps 2018-10-03 14:25:30 +00:00			`xhr.send();`
			`xhr.onreadystatechange = function () {`
			`if (this.readyState == 4 && this.status == 200) {`
			`const els = JSON.parse(this.responseText).map(element => ({`
			`element,`
			`collapsible: element.type === 'dir'`
			`}));`
tree tests 2018-10-04 14:29:24 +00:00
add tree sorter fixes #63148 2018-12-14 14:35:28 +00:00			`c(els);`
data tree: first steps 2018-10-03 14:25:30 +00:00			`}`
			`};`
			`});`
			`}`
tree: more filter testing 2018-09-26 20:16:35 +00:00			`}`
tree test: refilter on load 2018-10-02 10:42:16 +00:00
async data tree: preserve collapse state given identityProvider 2018-11-29 13:47:41 +00:00			`const identityProvider = {`
			`getId(node) {`
			`return node.element.path;`
			`}`
			`};`

fix manual tree tests 2019-09-09 13:09:47 +00:00			`const tree = new AsyncDataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, sorter, identityProvider });`
tree: quick demo 2018-06-24 21:20:32 +00:00
data tree: first steps 2018-10-03 14:25:30 +00:00			`return { tree, treeFilter };`
tree: collapse all 2018-09-21 13:43:02 +00:00			`}`
tree: quick demo 2018-06-24 21:20:32 +00:00
introduce DataTree 2018-12-17 10:02:02 +00:00			`function createDataTree() {`
			`const delegate = {`
			`getHeight() { return 22; },`
			`getTemplateId() { return 'template'; }`
			`};`

			`const renderer = {`
			`templateId: 'template',`
			`renderTemplate(container) { return container; },`
			`renderElement(node, index, container) { container.textContent = node.element.name; },`
			`disposeElement() { },`
			`disposeTemplate() { }`
			`};`

			`const treeFilter = new class {`
			`constructor() {`
			`this.pattern = null;`
			`let timeout;`
			`filter.oninput = () => {`
			`clearTimeout(timeout);`
			`timeout = setTimeout(() => this.updatePattern(), 300);`
			`};`
			`}`

			`updatePattern() {`
			`if (!filter.value) {`
			`this.pattern = null;`
			`} else {`
			`this.pattern = new RegExp(filter.value, 'i');`
			`}`

			`perf('refilter', () => tree.refilter());`
			`}`
			`filter(el) {`
			`return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;`
			`}`
			`};`

			`const dataSource = new class {`
			`getChildren(element) {`
			`return element.children \|\| [];`
			`}`
			`};`

			`const identityProvider = {`
			`getId(node) {`
			`return node.name;`
			`}`
			`};`

fix manual tree tests 2019-09-09 13:09:47 +00:00			`const tree = new DataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, identityProvider });`
introduce DataTree 2018-12-17 10:02:02 +00:00
fix manual tree tests 2019-09-09 13:09:47 +00:00			`tree.setInput({`
introduce DataTree 2018-12-17 10:02:02 +00:00			`children: [`
			`{ name: 'A', children: [{ name: 'AA' }, { name: 'AB' }] },`
			`{ name: 'B', children: [{ name: 'BA', children: [{ name: 'BAA' }] }, { name: 'BB' }] },`
			`{ name: 'C' }`
			`]`
fix manual tree tests 2019-09-09 13:09:47 +00:00			`});`
introduce DataTree 2018-12-17 10:02:02 +00:00
			`return { tree, treeFilter };`
			`}`

tree: collapse all 2018-09-21 13:43:02 +00:00			`switch (location.search) {`
			`case '?problems': {`
data tree: first steps 2018-10-03 14:25:30 +00:00			`const { tree, treeFilter } = createIndexTree();`

tree model: recursive setCollapsed related to #64887 2018-12-14 11:17:43 +00:00			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`
			`renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));`

tree: collapse all 2018-09-21 13:43:02 +00:00			`const files = [];`
update tree problems sample 2018-10-23 22:08:02 +00:00			`for (let i = 0; i < 100000; i++) {`
tree: collapse all 2018-09-21 13:43:02 +00:00			`const errors = [];`
tree: quick demo 2018-06-24 21:20:32 +00:00
update tree problems sample 2018-10-23 22:08:02 +00:00			`for (let j = 1; j <= 3; j++) {`
better demo 2019-07-23 09:09:24 +00:00			errors.push({ element: `error #${j} ` });
tree: collapse all 2018-09-21 13:43:02 +00:00			`}`

			files.push({ element: `file #${i}`, children: errors });
			`}`
list view: request scrollable element on next animation frame 2018-09-26 20:56:54 +00:00
			`perf('splice', () => tree.splice([0], 0, files));`
tree: collapse all 2018-09-21 13:43:02 +00:00			`break;`
tree: quick demo 2018-06-24 21:20:32 +00:00			`}`
data tree: first steps 2018-10-03 14:25:30 +00:00			`case '?data': {`
AsyncDataTree 2018-11-28 14:54:57 +00:00			`const { tree, treeFilter } = createAsyncDataTree();`
data tree: first steps 2018-10-03 14:25:30 +00:00
tree model: recursive setCollapsed related to #64887 2018-12-14 11:17:43 +00:00			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`
			`renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));`
fix manual tree tests 2019-09-09 13:09:47 +00:00			`refresh.onclick = () => perf('refresh', () => tree.updateChildren());`
list: finish dynamic height 2018-11-19 14:20:01 +00:00
fix manual tree tests 2019-09-09 13:09:47 +00:00			`tree.setInput(null);`
data tree: first steps 2018-10-03 14:25:30 +00:00
			`break;`
			`}`
introduce DataTree 2018-12-17 10:02:02 +00:00			`case '?objectdata': {`
			`const { tree, treeFilter } = createDataTree();`

			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`
			`renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));`
fix manual tree tests 2019-09-09 13:09:47 +00:00			`refresh.onclick = () => perf('refresh', () => tree.updateChildren());`
introduce DataTree 2018-12-17 10:02:02 +00:00
			`break;`
			`}`
first compressed object tree sample 2019-07-23 08:45:12 +00:00			`case '?compressed': {`
			`const { tree, treeFilter } = createCompressedObjectTree();`

			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`

:lipstick: 2019-07-23 09:29:21 +00:00			`const xhr = new XMLHttpRequest();`
			`xhr.open('GET', '/compressed.json');`
			`xhr.send();`
			`xhr.onreadystatechange = function () {`
			`if (this.readyState == 4 && this.status == 200) {`
			`tree.setChildren(null, JSON.parse(this.responseText));`
			`}`
			`};`
first compressed object tree sample 2019-07-23 08:45:12 +00:00
			`break;`
			`}`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`case '?height': {`
			`const { tree, treeFilter } = createIndexTree({ supportDynamicHeights: true });`

tree model: recursive setCollapsed related to #64887 2018-12-14 11:17:43 +00:00			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`
			`renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));`

			`const xhr = new XMLHttpRequest();`
			`xhr.open('GET', '/api/ls?path=');`
			`xhr.send();`
			`xhr.onreadystatechange = function () {`
			`if (this.readyState == 4 && this.status == 200) {`
			`perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));`
			`treeFilter.updatePattern();`
			`}`
			`};`
fix tree tests 2019-01-07 14:29:42 +00:00
			`// container.`


list: finish dynamic height 2018-11-19 14:20:01 +00:00			`break;`
			`}`
			`default: {`
data tree: first steps 2018-10-03 14:25:30 +00:00			`const { tree, treeFilter } = createIndexTree();`

tree model: recursive setCollapsed related to #64887 2018-12-14 11:17:43 +00:00			`expandall.onclick = () => perf('expand all', () => tree.expandAll());`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());`
			`renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));`

tree: collapse all 2018-09-21 13:43:02 +00:00			`const xhr = new XMLHttpRequest();`
			`xhr.open('GET', '/api/ls?path=');`
			`xhr.send();`
			`xhr.onreadystatechange = function () {`
			`if (this.readyState == 4 && this.status == 200) {`
list view: request scrollable element on next animation frame 2018-09-26 20:56:54 +00:00			`perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));`
tree test: refilter on load 2018-10-02 10:42:16 +00:00			`treeFilter.updatePattern();`
tree: collapse all 2018-09-21 13:43:02 +00:00			`}`
			`};`
list: finish dynamic height 2018-11-19 14:20:01 +00:00			`}`
tree: collapse all 2018-09-21 13:43:02 +00:00			`}`
first tree showcase 2018-06-23 22:09:45 +00:00			`});`
			`</script>`
			`</body>`

fix manual tree tests 2019-09-09 13:09:47 +00:00			`</html>`