Add icon for resource view items (#13009)

* Add icon for resource view items

* Remove unneeded stuff

src/sql/platform/resourceViewer/common/resourceViewerRegistry.ts

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Emitter, Event } from 'vs/base/common/event';
+import { URI } from 'vs/base/common/uri';
 import { Registry } from 'vs/platform/registry/common/platform';
 
 export const Extensions = {
@@ -12,7 +13,7 @@ export const Extensions = {
 
 export interface ResourceType {
 	readonly id: string;
-	readonly icon: string;
+	readonly icon: URI;
 	readonly name: string;
 }
 

src/sql/workbench/contrib/resourceViewer/browser/media/resourceViewerView.css

@@ -8,6 +8,30 @@
 	width: 100%;
 }
 
+.resource-view .monaco-list .monaco-list-row .resource-type-row {
+	display: flex;
+	height: 100%;
+	width: 100%;
+}
+
+.resource-view .monaco-list .monaco-list-row .monaco-tl-twistie {
+	width: 0px;
+}
+
+.resource-view .monaco-list .monaco-list-row .resource-type-icon {
+	background-repeat: no-repeat;
+	background-size: contain;
+	width: 30px;
+	height: 30px;
+	margin: 5px;
+}
+
+.resource-view .monaco-list .monaco-list-row .resource-type-name {
+	margin: auto;
+	font-size: 13px;
+	width: 100%;
+}
+
 .resource-viewer .actions-container .action-item .action-label {
 	padding-left: 20px;
 	padding-right: 5px;

src/sql/workbench/contrib/resourceViewer/browser/resourceViewerView.ts

@@ -5,7 +5,7 @@
 
 import 'vs/css!./media/resourceViewerView';
 import { ResourceType, ResourceViewerResourcesRegistry, Extensions } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
-import { append, $ } from 'vs/base/browser/dom';
+import { append, $, asCSSUrl } from 'vs/base/browser/dom';
 import { IIdentityProvider, IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
 import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget';
 import { IDataSource, ITreeMouseEvent, ITreeNode, ITreeRenderer } from 'vs/base/browser/ui/tree/tree';
@@ -22,6 +22,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { IViewPaneOptions, ViewPane } from 'vs/workbench/browser/parts/views/viewPaneContainer';
 import { IViewDescriptorService } from 'vs/workbench/common/views';
+import { localize } from 'vs/nls';
 
 type TreeElement = ResourceType;
 
@@ -73,10 +74,10 @@ export class ResourceViewerView extends ViewPane {
 		this.tree.setInput(this.model);
 
 		this._register(Registry.as<ResourceViewerResourcesRegistry>(Extensions.ResourceViewerExtension).onDidRegisterResource(() => this.tree.updateChildren(this.model)));
-		this._register(this.tree.onMouseDblClick(this.onDoubleClick, this));
+		this._register(this.tree.onMouseClick(this.onMouseClick, this));
 	}
 
-	private onDoubleClick(event: ITreeMouseEvent<TreeElement | null>) {
+	private onMouseClick(event: ITreeMouseEvent<TreeElement | null>) {
 		if (event.element) {
 			this.commandService.executeCommand('resourceViewer.openResourceViewer', event.element.id);
 		}
@@ -98,14 +99,15 @@ class ResourceRenderer implements ITreeRenderer<ResourceType, void, ResourceType
 	public readonly templateId = ResourceRenderer.TEMPLATEID;
 
 	renderTemplate(parent: HTMLElement): ResourceTypeTemplate {
-		const container = append(parent, $('span'));
+		const container = append(parent, $('span.resource-type-row'));
-		const icon = append(container, $('.icon'));
+		const icon = append(container, $('.resource-type-icon'));
-		const name = append(container, $('.name'));
+		const name = append(container, $('.resource-type-name'));
 		return { name, icon };
 	}
 
 	renderElement(element: ITreeNode<ResourceType, void>, index: number, templateData: ResourceTypeTemplate, height: number): void {
 		templateData.name.innerText = element.element.name;
+		templateData.icon.style.backgroundImage = asCSSUrl(element.element.icon);
 	}
 
 	disposeTemplate(templateData: ResourceTypeTemplate): void {
@@ -116,7 +118,7 @@ class ResourceRenderer implements ITreeRenderer<ResourceType, void, ResourceType
 
 class ListDelegate implements IListVirtualDelegate<TreeElement> {
 	getHeight(): number {
-		return 22;
+		return 40;
 	}
 
 	getTemplateId(element: TreeElement): string {
@@ -144,7 +146,7 @@ class ListAccessibilityProvider implements IListAccessibilityProvider<TreeElemen
 	}
 
 	getWidgetAriaLabel(): string {
-		return 'Resource Viewer Tree';
+		return localize('resourceViewer.ariaLabel', "Resource Viewer Tree");
 	}
 }
 

src/sql/workbench/contrib/resourceViewer/common/resourceViewerViewExtensionPoint.ts

@@ -8,7 +8,8 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import { Registry } from 'vs/platform/registry/common/platform';
 import { IExtensionPoint, ExtensionsRegistry, ExtensionMessageCollector } from 'vs/workbench/services/extensions/common/extensionsRegistry';
 import { IWorkbenchContribution } from 'vs/workbench/common/contributions';
-import { ResourceViewerResourcesRegistry, Extensions } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
+import { ResourceViewerResourcesRegistry, Extensions, ResourceType } from 'sql/platform/resourceViewer/common/resourceViewerRegistry';
+import * as resources from 'vs/base/common/resources';
 
 interface IUserFriendlyViewDescriptor {
 	id: string;
@@ -59,8 +60,13 @@ export class ResourceViewResourcesExtensionHandler implements IWorkbenchContribu
 					if (!this.isValidResource(descriptor, collector)) {
 						return;
 					}
-
+					const iconPath = resources.joinPath(extension.description.extensionLocation, descriptor.icon);
-					resourceRegistry.registerResource(descriptor);
+					const resourceType: ResourceType = {
+						name: descriptor.name,
+						id: descriptor.id,
+						icon: iconPath
+					};
+					resourceRegistry.registerResource(resourceType);
 				}
 			}
 		});