From 660c1d6f2105216e626890c815f1e0280b2fff62 Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Wed, 21 Oct 2020 07:43:04 -0700
Subject: [PATCH] Add icon for resource view items (#13009)

* Add icon for resource view items

* Remove unneeded stuff
---
 .../common/resourceViewerRegistry.ts          |  3 ++-
 .../browser/media/resourceViewerView.css      | 24 +++++++++++++++++++
 .../browser/resourceViewerView.ts             | 18 +++++++-------
 .../resourceViewerViewExtensionPoint.ts       | 12 +++++++---
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/sql/platform/resourceViewer/common/resourceViewerRegistry.ts b/src/sql/platform/resourceViewer/common/resourceViewerRegistry.ts
index 8ec2806b32..6a11f0003c 100644
--- a/src/sql/platform/resourceViewer/common/resourceViewerRegistry.ts
+++ b/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;
 }
 
diff --git a/src/sql/workbench/contrib/resourceViewer/browser/media/resourceViewerView.css b/src/sql/workbench/contrib/resourceViewer/browser/media/resourceViewerView.css
index 5c230faafe..a9bca6cc0e 100644
--- a/src/sql/workbench/contrib/resourceViewer/browser/media/resourceViewerView.css
+++ b/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;
diff --git a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerView.ts b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerView.ts
index 21c4ed2915..cd8ee9e0af 100644
--- a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerView.ts
+++ b/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 icon = append(container, $('.icon'));
-		const name = append(container, $('.name'));
+		const container = append(parent, $('span.resource-type-row'));
+		const icon = append(container, $('.resource-type-icon'));
+		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");
 	}
 }
 
diff --git a/src/sql/workbench/contrib/resourceViewer/common/resourceViewerViewExtensionPoint.ts b/src/sql/workbench/contrib/resourceViewer/common/resourceViewerViewExtensionPoint.ts
index 4205f992da..56395ff1c8 100644
--- a/src/sql/workbench/contrib/resourceViewer/common/resourceViewerViewExtensionPoint.ts
+++ b/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;
 					}
-
-					resourceRegistry.registerResource(descriptor);
+					const iconPath = resources.joinPath(extension.description.extensionLocation, descriptor.icon);
+					const resourceType: ResourceType = {
+						name: descriptor.name,
+						id: descriptor.id,
+						icon: iconPath
+					};
+					resourceRegistry.registerResource(resourceType);
 				}
 			}
 		});