vscode/test/tree/public/index.html
2018-08-10 23:15:45 +02:00

66 lines
No EOL
1.4 KiB
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;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="/static/vs/loader.js"></script>
<script>
require.config({ baseUrl: '/static' });
require(['vs/base/browser/ui/tree/tree', 'vs/base/common/iterator'], ({ Tree }, { iter }) => {
const delegate = {
getHeight() { return 22; },
getTemplateId() { return 'template'; }
};
const renderer = {
templateId: 'template',
renderTemplate(container) { return container; },
renderElement(element, index, container) {
container.textContent = element;
},
disposeTemplate() { }
};
const tree = new Tree(container, delegate, [renderer]);
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/ls?path=');
xhr.send();
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
const data = JSON.parse(this.responseText);
performance.mark('before splice');
const start = performance.now();
tree.splice([0], 0, [data]);
console.log('splice took', performance.now() - start);
performance.mark('after splice');
}
};
});
</script>
</body>
</html>