list: add tests

f7f2e31a · Joao Moreno · ab2fc06b · f7f2e31a · f7f2e31a · f7f2e31a
4 changed file
--- a/list.html
+++ b/list.html
+<!doctype html>
+<html>
+	<head>
+		<script src="out/vs/loader.js"></script>
+		<script>
+			require.config({
+				paths: {
+					vs: 'out/vs'
+				}
+			});
+
+			require(['vs/base/browser/ui/list/listTest'], function (test) {
+				test.setupList(document.getElementById('list'));
+				document.getElementById('list-add').onclick = test.addPersonToList;
+				document.getElementById('list-addmany').onclick = test.addManyPeopleToList;
+				document.getElementById('list-addmanyreal').onclick = test.addManyRealPeopleToList;
+				document.getElementById('list-addmanyboring').onclick = test.addManyBoringPeopleToList;
+
+				test.setupTree(document.getElementById('tree'));
+				document.getElementById('tree-add').onclick = test.addPersonToTree;
+				document.getElementById('tree-addmany').onclick = test.addManyPeopleToTree;
+				document.getElementById('tree-addmanyreal').onclick = test.addManyRealPeopleToTree;
+				document.getElementById('tree-addmanyboring').onclick = test.addManyBoringPeopleToTree;
+			});
+		</script>
+		<style>
+			.container {
+				border: 1px solid gray;
+				width: 300px;
+				height: 300px;
+			}
+		</style>
+	</head>
+	<body>
+		<div>
+			<div>
+				<button id="list-add">Add Person</button>
+				<button id="list-addmany">Add Many People</button>
+				<button id="list-addmanyreal">Add Many Real People</button>
+				<button id="list-addmanyboring">Add Many Boring People</button>
+			</div>
+			<div id="list" class="container"></div>
+		</div>
+		<div>
+			<div>
+				<button id="tree-add">Add Person</button>
+				<button id="tree-addmany">Add Many People</button>
+				<button id="tree-addmanyreal">Add Many Real People</button>
+				<button id="tree-addmanyboring">Add Many Boring People</button>
+			</div>
+			<div id="tree" class="container"></div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
--- a/src/vs/base/browser/ui/list/list.css
+++ b/src/vs/base/browser/ui/list/list.css
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+.monaco-list {
+	height: 100%;
+	width: 100%;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: -moz-none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+	position: relative;
+}
+
+.monaco-list > .monaco-scrollable-element {
+	height: 100%;
+}
+
+.monaco-list > .monaco-scrollable-element > .monaco-list-wrapper {
+	height: 100%;
+	width: 100%;
+	position: relative;
+}
+
+.monaco-list .monaco-list-rows {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-list .monaco-list-rows > .monaco-list-row {
+	-moz-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+	cursor: pointer;
+	overflow: hidden;
+	width: 100%;
+	touch-action: none;
+}
+
+.monaco-list .monaco-list-rows > .monaco-list-row > .content {
+	position: relative;
+	-moz-transition:	opacity 0.15s ease-out;
+	-webkit-transition:	opacity 0.15s ease-out;
+	-ms-transition:		opacity 0.15s ease-out;
+	-o-transition:		opacity 0.15s ease-out;
+	transition:			opacity 0.15s ease-out;
+}
+
+.monaco-list-drag-image {
+	display: inline-block;
+	padding: 1px 7px;
+	color: white;
+	background-color: #4A4A4A;
+	border-radius: 10px;
+	font-size: 12px;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* for OS X ballistic scrolling */
+.monaco-list .monaco-list-rows > .monaco-list-row.scrolling {
+	display: none;
+}
\ No newline at end of file
--- a/src/vs/base/browser/ui/list/listImpl.ts
+++ b/src/vs/base/browser/ui/list/listImpl.ts
@@ -95,12 +95,16 @@ export class List<T> implements IScrollable {

 		const deleted = this.items.splice(start, deleteCount, ...inserted);
 		deleted.forEach(item => this.removeItemFromDOM(item));
-		inserted.forEach((_, index) => this.insertItemInDOM(start + index));
+		inserted.forEach((_, index) => this.refreshItem(start + index));

 		this.setScrollTop(this.scrollTop);
 		this.scrollableElement.onElementInternalDimensions();
 	}

+	get length(): number {
+		return this.items.length;
+	}
+
 	layout(height?: number): void {
 		// if (!this.isTreeVisible()) {
 		// 	return;

--- a/src/vs/base/browser/ui/list/listTest.ts
+++ b/src/vs/base/browser/ui/list/listTest.ts
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IDelegate, IRenderer } from './list';
+import { List } from './listImpl';
+import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
+import WinJS = require('vs/base/common/winjs.base');
+
+interface Person {
+	name: string;
+	height: number;
+}
+
+interface PersonViewData {
+	name: HTMLElement;
+}
+
+class Delegate implements IDelegate<Person> {
+	getHeight(person: Person): number {
+		return person.height;
+	}
+
+	getTemplateId(person: Person): string {
+		return 'person';
+	}
+}
+
+class PersonRenderer implements IRenderer<Person, PersonViewData> {
+	renderTemplate(container: HTMLElement): PersonViewData {
+		const name = document.createElement('span.name');
+		container.appendChild(name);
+		return { name };
+	}
+
+	renderElement(person: Person, templateData: PersonViewData): void {
+		templateData.name.textContent = person.name;
+	}
+
+	disposeTemplate(templateData: PersonViewData): void {
+		// noop
+	}
+}
+
+function generatePerson() {
+	return {
+		name: new Array(16).join().replace(/(.|$)/g, function(){return ((Math.random()*36)|0).toString(36);}),
+		height: Math.random() * 10 + 20
+	};
+}
+
+function generateBoringPerson() {
+	return {
+		name: new Array(16).join().replace(/(.|$)/g, function(){return ((Math.random()*36)|0).toString(36);}),
+		height: 24
+	};
+}
+
+function generateRealPerson() {
+	return {
+		name: new Array(16).join().replace(/(.|$)/g, function(){return ((Math.random()*36)|0).toString(36);}),
+		height: Math.random() < 0.01 ? 48 : 24
+	};
+}
+
+const renderer = new PersonRenderer();
+let list: List<Person>;
+export function setupList(container: HTMLElement) {
+	list = new List(container, new Delegate(), { person: renderer });
+}
+
+export function addPersonToList() {
+	const person = generatePerson();
+
+	list.splice(list.length, 0, person);
+}
+
+export function addManyPeopleToList() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generatePerson());
+	}
+
+	list.splice(list.length, 0, ...people);
+}
+
+export function addManyRealPeopleToList() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generateRealPerson());
+	}
+
+	list.splice(list.length, 0, ...people);
+}
+
+export function addManyBoringPeopleToList() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generateBoringPerson());
+	}
+
+	list.splice(list.length, 0, ...people);
+}
+
+const treeModel: Person[] = [];
+let tree: Tree;
+export function setupTree(container: HTMLElement) {
+	tree = new Tree(container, {
+		dataSource: {
+			getId: (_, e) => e.length ? 'root' : e.name,
+			hasChildren: (_, e) => !!e.length,
+			getChildren: (_, e) => WinJS.Promise.as(e),
+			getParent: () => null
+		},
+		renderer: {
+			getHeight: (_, p) => p.height,
+			getTemplateId: () => 'person',
+			renderTemplate: (_, __, c) => renderer.renderTemplate(c),
+			renderElement: (_, p, __, d) => renderer.renderElement(p, d),
+			disposeTemplate: () => null
+		}
+	});
+
+	tree.setInput(treeModel);
+}
+
+export function addPersonToTree() {
+	treeModel.push(generatePerson());
+	tree.refresh();
+}
+
+export function addManyPeopleToTree() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generatePerson());
+	}
+
+	treeModel.push(...people);
+	tree.refresh();
+}
+
+export function addManyRealPeopleToTree() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generateRealPerson());
+	}
+
+	treeModel.push(...people);
+	tree.refresh();
+}
+
+export function addManyBoringPeopleToTree() {
+	const people = [];
+
+	for (var i = 0; i < 10000; i++) {
+		people.push(generateBoringPerson());
+	}
+
+	treeModel.push(...people);
+	tree.refresh();
+}
\ No newline at end of file