Implement #26948

- Initial version of custom views and tree data provider API

src/vs/base/browser/ui/splitview/splitview.css

@@ -30,6 +30,10 @@
 	display: flex;
 }
 
+.monaco-split-view > .split-view-view > .header.hide {
+	display: none;
+}
+
 /* Bold font style does not go well with CJK fonts */
 .monaco-split-view:lang(zh-Hans) > .split-view-view > .header,
 .monaco-split-view:lang(zh-Hant) > .split-view-view > .header,

src/vs/base/browser/ui/splitview/splitview.ts

@@ -117,7 +117,9 @@ const headerDefaultOpts = {
 
 export abstract class HeaderView extends View {
 
-	protected headerSize: number;
+	private _headerSize: number;
+	private _showHeader: boolean;
+
 	protected header: HTMLElement;
 	protected body: HTMLElement;
 
@@ -127,7 +129,8 @@ export abstract class HeaderView extends View {
 	constructor(opts: IHeaderViewOptions) {
 		super(opts);
 
-		this.headerSize = types.isUndefined(opts.headerSize) ? 22 : opts.headerSize;
+		this._headerSize = types.isUndefined(opts.headerSize) ? 22 : opts.headerSize;
+		this._showHeader = this._headerSize > 0;
 
 		this.headerBackground = opts.headerBackground || headerDefaultOpts.headerBackground;
 		this.headerHighContrastBorder = opts.headerHighContrastBorder;
@@ -140,6 +143,10 @@ export abstract class HeaderView extends View {
 		this.applyStyles();
 	}
 
+	protected get headerSize(): number {
+		return this._showHeader ? this._headerSize : 0;
+	}
+
 	protected applyStyles(): void {
 		if (this.header) {
 			const headerBackgroundColor = this.headerBackground ? this.headerBackground.toString() : null;
@@ -162,7 +169,7 @@ export abstract class HeaderView extends View {
 			this.header.style.height = headerSize;
 		}
 
-		if (this.headerSize > 0) {
+		if (this._showHeader) {
 			this.renderHeader(this.header);
 			container.appendChild(this.header);
 		}
@@ -177,6 +184,28 @@ export abstract class HeaderView extends View {
 		this.applyStyles();
 	}
 
+	showHeader(): boolean {
+		if (!this._showHeader) {
+			if (!this.body.parentElement.contains(this.header)) {
+				this.renderHeader(this.header);
+				this.body.parentElement.insertBefore(this.header, this.body);
+			}
+			dom.removeClass(this.header, 'hide');
+			this._showHeader = true;
+			return true;
+		}
+		return false;
+	}
+
+	hideHeader(): boolean {
+		if (this._showHeader) {
+			dom.addClass(this.header, 'hide');
+			this._showHeader = false;
+			return true;
+		}
+		return false;
+	}
+
 	layout(size: number, orientation: Orientation): void {
 		this.layoutBodyContainer(orientation);
 		this.layoutBody(size - this.headerSize);

src/vs/vscode.proposed.d.ts

@@ -13,98 +13,81 @@ declare module 'vscode' {
 	}
 
 	export namespace window {
-
 		/**
-		 * Create a new explorer view.
-		 *
+		 * Register a [TreeDataProvider](#TreeDataProvider) for the registered view `id`.
 		 * @param id View id.
-		 * @param name View name.
-		 * @param dataProvider A [TreeDataProvider](#TreeDataProvider).
-		 * @return An instance of [View](#View).
+		 * @param treeDataProvider A [TreeDataProvider](#TreeDataProvider) that provides tree data for the view
 		 */
-		export function createExplorerView<T>(id: string, name: string, dataProvider: TreeDataProvider<T>): View<T>;
+		export function registerTreeDataProvider<T>(id: string, treeDataProvider: TreeDataProvider<T>): Disposable;
 	}
 
 	/**
-	 * A view to interact with nodes
+	 * A data provider that provides tree data for a view
 	 */
-	export interface View<T> {
+	export interface TreeDataProvider<T> {
+		/**
+		 * An optional event to signal that an element or root has changed.
+		 */
+		onDidChange?: Event<T | undefined | null>;
 
 		/**
-		 * Refresh the given nodes
+		 * get [TreeItem](#TreeItem) representation of the `element`
+		 *
+		 * @param element The element for which [TreeItem](#TreeItem) representation is asked for.
+		 * @return [TreeItem](#TreeItem) representation of the element
 		 */
-		refresh(...nodes: T[]): void;
+		getTreeItem(element: T): TreeItem;
 
 		/**
-		 * Dispose this view
+		 * get the children of `element` or root.
+		 *
+		 * @param element The element from which the provider gets children for.
+		 * @return Children of `element` or root.
 		 */
-		dispose(): void;
+		getChildren(element?: T): T[] | Thenable<T[]>;
 	}
 
-	/**
-	 * A data provider for a tree view contribution.
-	 *
-	 * The contributed tree view will ask the corresponding provider to provide the root
-	 * node and resolve children for each node. In addition, the provider could **optionally**
-	 * provide the following information for each node:
-	 * - label: A human-readable label used for rendering the node.
-	 * - hasChildren: Whether the node has children and is expandable.
-	 * - clickCommand: A command to execute when the node is clicked.
-	 */
-	export interface TreeDataProvider<T> {
-
+	export interface TreeItem {
 		/**
-		 * Provide the root node. This function will be called when the tree explorer is activated
-		 * for the first time. The root node is hidden and its direct children will be displayed on the first level of
-		 * the tree explorer.
-		 *
-		 * @return The root node.
+		 * Label of the tree item
 		 */
-		provideRootNode(): T | Thenable<T>;
+		label: string;
 
 		/**
-		 * Resolve the children of `node`.
-		 *
-		 * @param node The node from which the provider resolves children.
-		 * @return Children of `node`.
+		 * The icon path for the tree item
 		 */
-		resolveChildren?(node: T): T[] | Thenable<T[]>;
+		iconPath?: string | Uri | { light: string | Uri; dark: string | Uri };
 
 		/**
-		 * Provide a human-readable string that will be used for rendering the node. Default to use
-		 * `node.toString()` if not provided.
-		 *
-		 * @param node The node from which the provider computes label.
-		 * @return A human-readable label.
+		 * The [command](#Command) which should be run when the tree item
+		 * is open in the Source Control viewlet.
 		 */
-		getLabel?(node: T): string;
+		command?: Command;
 
 		/**
-		 * Determine if `node` has children and is expandable. Default to `true` if not provided.
-		 *
-		 * @param node The node to determine if it has children and is expandable.
-		 * @return A boolean that determines if `node` has children and is expandable.
+		 * Context value of the tree node
 		 */
-		getHasChildren?(node: T): boolean;
+		contextValue?: string;
 
 		/**
-		 * Provider a context key to be set for the node. This can be used to describe actions for each node.
-		 *
-		 * @param node The node from which the provider computes context key.
-		 * @return A context key.
+		 * Collapsible state of the tree item.
+		 * Required only when item has children.
 		 */
-		getContextKey?(node: T): string;
+		collapsibleState?: TreeItemCollapsibleState;
+	}
 
+	/**
+	 * Collapsible state of the tree item
+	 */
+	export enum TreeItemCollapsibleState {
 		/**
-		 * Get the command to execute when `node` is clicked.
-		 *
-		 * Commands can be registered through [registerCommand](#commands.registerCommand). `node` will be provided
-		 * as the first argument to the command's callback function.
-		 *
-		 * @param node The node that the command is associated with.
-		 * @return The command to execute when `node` is clicked.
+		 * Determines an item is collapsed
+		 */
+		Collapsed = 1,
+		/**
+		 * Determines an item is expanded
 		 */
-		getClickCommand?(node: T): Command;
+		Expanded = 2
 	}
 
 	/**

src/vs/workbench/api/electron-browser/extensionHost.contribution.ts

@@ -19,7 +19,7 @@ import { MainThreadDiagnostics } from './mainThreadDiagnostics';
 import { MainThreadDocuments } from './mainThreadDocuments';
 import { MainThreadEditors } from './mainThreadEditors';
 import { MainThreadErrors } from './mainThreadErrors';
-import { MainThreadExplorerView } from './mainThreadExplorerView';
+import { MainThreadTreeViews } from './mainThreadTreeViews';
 import { MainThreadLanguageFeatures } from './mainThreadLanguageFeatures';
 import { MainThreadLanguages } from './mainThreadLanguages';
 import { MainThreadMessageService } from './mainThreadMessageService';
@@ -74,7 +74,7 @@ export class ExtHostContribution implements IWorkbenchContribution {
 		col.define(MainContext.MainThreadDocuments).set(this.instantiationService.createInstance(MainThreadDocuments, documentsAndEditors));
 		col.define(MainContext.MainThreadEditors).set(this.instantiationService.createInstance(MainThreadEditors, documentsAndEditors));
 		col.define(MainContext.MainThreadErrors).set(create(MainThreadErrors));
-		col.define(MainContext.MainThreadExplorerViews).set(create(MainThreadExplorerView));
+		col.define(MainContext.MainThreadTreeViews).set(create(MainThreadTreeViews));
 		col.define(MainContext.MainThreadLanguageFeatures).set(create(MainThreadLanguageFeatures));
 		col.define(MainContext.MainThreadLanguages).set(create(MainThreadLanguages));
 		col.define(MainContext.MainThreadMessageService).set(create(MainThreadMessageService));