chrome-devtools-frontend
Version:
Chrome DevTools UI
92 lines (83 loc) • 2.55 kB
text/typescript
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
import * as ComponentHelpers from '../../helpers/helpers.js';
import * as TreeOutline from '../../tree_outline/tree_outline.js';
await ComponentHelpers.ComponentServerSetup.setup();
await FrontendHelpers.initializeGlobalVars();
async function loadInSomeNodes(): Promise<TreeOutline.TreeOutlineUtils.TreeNode<string>[]> {
const europeanOffices: TreeOutline.TreeOutlineUtils.TreeNode<string>[] = [
{
treeNodeData: 'UK',
id: 'UK',
children: () => Promise.resolve([
{
treeNodeData: 'LON',
id: 'LON',
children: () => Promise.resolve(
[{treeNodeData: '6PS', id: '6PS'}, {treeNodeData: 'CSG', id: 'CSG'}, {treeNodeData: 'BEL', id: 'BEL'}]),
},
]),
},
{
treeNodeData: 'Germany',
id: 'Germany',
children: () => Promise.resolve([
{treeNodeData: 'MUC', id: 'MUC'},
{treeNodeData: 'BER', id: 'MUC'},
]),
},
];
return new Promise(resolve => {
setTimeout(() => resolve(europeanOffices), 250);
});
}
const data: TreeOutline.TreeOutline.TreeOutlineData<string> = {
defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
tree: [
{
treeNodeData: 'Offices',
id: 'Offices',
children: () => Promise.resolve([
{
treeNodeData: 'Europe',
id: 'Europe',
async children() {
const children = await loadInSomeNodes();
return children;
},
},
]),
},
{
treeNodeData: 'Products',
id: 'Products',
children: () => Promise.resolve([
{
treeNodeData: 'Chrome',
id: 'Chrome',
},
{
treeNodeData: 'YouTube',
id: 'YouTube',
},
{
treeNodeData: 'Drive',
id: 'Drive',
},
{
treeNodeData: 'Calendar',
id: 'Calendar',
},
]),
},
],
};
const component = new TreeOutline.TreeOutline.TreeOutline<string>();
component.setAttribute('toplevelbordercolor', 'var(--sys-color-token-property-special)');
component.data = data;
document.getElementById('container')?.appendChild(component);
document.getElementById('recursively-expand')?.addEventListener('click', () => {
void component.expandRecursively();
});