extension viewlet: images

src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts

@@ -26,6 +26,7 @@ export class ExtensionEditor extends BaseEditor {
 
 	static ID: string = 'workbench.editor.extension';
 
+	private icon: HTMLElement;
 	private body: HTMLElement;
 
 	private _highlight: ITemplateData;
@@ -52,7 +53,11 @@ export class ExtensionEditor extends BaseEditor {
 
 		const root = append(container, $('.extension-editor'));
 		const header = append(root, $('.header'));
-		header.innerText = 'here goes description, author name, links, ratings, install buttons, etc';
+
+		this.icon = append(header, $('.icon'));
+		// const details = append(header, $('.details'));
+
+		// header.innerText = 'here goes description, author name, links, ratings, install buttons, etc';
 		this.body = append(root, $('.body'));
 	}
 
@@ -64,6 +69,8 @@ export class ExtensionEditor extends BaseEditor {
 		let promise = TPromise.as<void>(null);
 		const extension = input.extension;
 
+		this.icon.style.backgroundImage = `url("${ extension.iconUrl }")`;
+
 		if (!extension.readmeUrl) {
 			this.body.innerHTML = 'no readme :(';
 		} else {

src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts

@@ -17,7 +17,7 @@ import { CombinedInstallAction } from './extensionsActions';
 export interface ITemplateData {
 	extension: IExtension;
 	element: HTMLElement;
-	icon: HTMLImageElement;
+	icon: HTMLElement;
 	name: HTMLElement;
 	version: HTMLElement;
 	author: HTMLElement;
@@ -49,7 +49,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
 	renderTemplate(root: HTMLElement): ITemplateData {
 		const element = append(root, $('.extension'));
-		const icon = append(element, $<HTMLImageElement>('img.icon'));
+		const icon = append(element, $('.icon'));
 		const details = append(element, $('.details'));
 		const header = append(details, $('.header'));
 		const name = append(header, $('span.name.ellipsis'));
@@ -69,7 +69,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
 		addClass(data.element, 'loading');
 		data.extension = null;
-		data.icon.src = '';
+		data.icon.style.backgroundImage = '';
 		data.name.textContent = '';
 		data.version.textContent = '';
 		data.author.textContent = '';
@@ -82,7 +82,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 
 		removeClass(data.element, 'loading');
 		data.extension = extension;
-		data.icon.src = extension.iconUrl;
+		data.icon.style.backgroundImage = `url("${ extension.iconUrl }")`;
 		data.name.textContent = extension.displayName;
 		data.version.textContent = extension.version;
 		data.author.textContent = extension.publisherDisplayName;

src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css

@@ -12,11 +12,19 @@
 }
 
 .extension-editor > .header {
-	height: 40px;
+	height: 128px;
 	background: rgba(128, 128, 128, 0.15); /* TODO */
 	padding: 20px;
 }
 
+.extension-editor > .header > .icon {
+	height: 128px;
+	width: 128px;
+	background-size: 128px;
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
 .extension-editor > .body {
 	flex: 1;
 	overflow-y: scroll;

src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css

@@ -44,6 +44,9 @@
 	height: 42px;
 	padding: 10px 14px 10px 0;
 	flex-shrink: 0;
+	background-repeat: no-repeat;
+	background-size: 42px;
+	background-position: left center;
 }
 
 .extensions-viewlet > .extensions .extension.loading > .icon {