simplify theme

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

@@ -5,7 +5,6 @@
 
 'use strict';
 
-import { localize } from 'vs/nls';
 import { append, emmet as $, addClass, removeClass } from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IDelegate } from 'vs/base/browser/ui/list/list';
@@ -14,7 +13,6 @@ import { IExtension } from 'vs/platform/extensionManagement/common/extensionMana
 
 export interface ITemplateData {
 	extension: IExtension;
-	container: HTMLElement;
 	element: HTMLElement;
 	icon: HTMLImageElement;
 	name: HTMLElement;
@@ -34,20 +32,8 @@ export interface IExtensionEntry {
 	state: ExtensionState;
 }
 
-// function extensionEntryCompare(one: IExtensionEntry, other: IExtensionEntry): number {
-// 	const oneInstallCount = one.extension.galleryInformation ? one.extension.galleryInformation.installCount : 0;
-// 	const otherInstallCount = other.extension.galleryInformation ? other.extension.galleryInformation.installCount : 0;
-// 	const diff = otherInstallCount - oneInstallCount;
-
-// 	if (diff !== 0) {
-// 		return diff;
-// 	}
-
-// 	return one.extension.displayName.localeCompare(other.extension.displayName);
-// }
-
 export class Delegate implements IDelegate<IExtension> {
-	getHeight() { return 90; }
+	getHeight() { return 62; }
 	getTemplateId() { return 'extension'; }
 }
 
@@ -65,18 +51,15 @@ export class Renderer implements IPagedRenderer<IExtensionEntry, ITemplateData>
 	get templateId() { return 'extension'; }
 
 	renderTemplate(root: HTMLElement): ITemplateData {
-		const container = append(root, $('.extension-container'));
-		const element = append(container, $('.extension'));
-		const header = append(element, $('.header'));
-		const icon = append(header, $<HTMLImageElement>('img.icon'));
-		const details = append(header, $('.details'));
-		const title = append(details, $('.title'));
-		const subtitle = append(details, $('.subtitle'));
-		const name = append(title, $('span.name'));
-		const version = append(subtitle, $('span.version'));
-		const author = append(subtitle, $('span.author'));
-		const description = append(details, $('.description'));
-		const result = { extension: null, container, element, icon, name, version, author, description };
+		const element = append(root, $('.extension'));
+		const icon = append(element, $<HTMLImageElement>('img.icon'));
+		const details = append(element, $('.details'));
+		const header = append(details, $('.header'));
+		const name = append(header, $('span.name.ellipsis'));
+		const version = append(header, $('span.version.ellipsis'));
+		const author = append(header, $('span.author.ellipsis'));
+		const description = append(details, $('.description.ellipsis'));
+		const result = { extension: null, element, icon, name, version, author, description };
 
 		this._templates.push(result);
 		return result;
@@ -102,7 +85,7 @@ export class Renderer implements IPagedRenderer<IExtensionEntry, ITemplateData>
 		data.icon.src = version.iconUrl;
 		data.name.textContent = extension.displayName;
 		data.version.textContent = ` ${ extension.version }`;
-		data.author.textContent = ` ${ localize('author', "by {0}", publisher)}`;
+		data.author.textContent = ` ${ publisher }`;
 		data.description.textContent = extension.description;
 	}
 

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

@@ -24,106 +24,65 @@
 	height: calc(100% - 38px);
 }
 
-.extensions-viewlet > .extensions .extension-container {
+.extensions-viewlet > .extensions .extension {
+	box-sizing: border-box;
 	width: 100%;
 	height: 100%;
-}
-
-.extensions-viewlet > .extensions .extension-container > .extension {
-	margin: 10px 20px 10px 17px;
-	height: calc(100% - 20px);
+	padding: 0 19px 0 16px;
 	overflow: hidden;
-	background-color: white;
-	box-shadow: 2px 2px 5px rgba(0,0,0,.1);
-}
-
-.extensions-viewlet > .extensions .extension-container > .extension:hover {
-	box-shadow: 2px 2px 5px rgba(0,0,0,.25);
+	display: flex;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension.loading {
+.extensions-viewlet > .extensions .extension.loading {
 	background-image: url('loading.svg');
 	background-position: center center;
 	background-repeat: no-repeat;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header {
-	display: flex;
-}
-
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .icon {
-	box-sizing: border-box;
-	width: 70px;
-	height: 70px;
-	padding: 8px;
+.extensions-viewlet > .extensions .extension > .icon {
+	width: 42px;
+	height: 42px;
+	padding: 10px 14px 10px 0;
 	flex-shrink: 0;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension.loading > .header > .icon {
+.extensions-viewlet > .extensions .extension.loading > .icon {
 	display: none;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .details {
+.extensions-viewlet > .extensions .extension > .details {
 	flex: 1;
-	padding: 8px;
+	padding: 4px 0;
 	overflow: hidden;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .title > .name {
+.extensions-viewlet > .extensions .extension > .details > .header {
+	display: flex;
+}
+
+.extensions-viewlet > .extensions .extension > .details > .header > .name {
 	font-weight: bold;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .subtitle {
-	font-size: 90%;
+.extensions-viewlet > .extensions .extension > .details > .header > .version {
+	opacity: 0.6;
+	font-size: 80%;
+	padding-left: 6px;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > .subtitle > .author {
-	font-style: italic;
+.extensions-viewlet > .extensions .extension > .details > .header > .author {
+	flex: 1;
+	font-size: 90%;
+	text-align: right;
+	padding-left: 6px;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .header > .details > div {
+.extensions-viewlet > .extensions .extension .ellipsis {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	width: 100%;
 }
 
-.extensions-viewlet > .extensions .extension-container > .extension > .body {
-	display: none;
-}
-
-/* List overrides */
-
-.extensions-viewlet .monaco-list-row:hover {
-	background-color: transparent;
-}
-
-.extensions-viewlet .monaco-list-row.selected {
-	background-color: transparent;
-	color: inherit;
-}
-
-/* Themeing */
-
-.vs-dark .extensions-viewlet > .extensions .extension-container > .extension {
-	background-color: #333333;
-	box-shadow: 2px 2px 5px rgba(0,0,0,.3);
-}
-
-.vs-dark .extensions-viewlet > .extensions .extension-container > .extension:hover {
-	box-shadow: 2px 2px 5px rgba(0,0,0,.7);
-}
-
-/* Selection */
-
-.extensions-viewlet .monaco-list-row.selected .extension-container > .extension {
-	box-shadow: 2px 2px 5px rgba(0,0,0,.25);
-	background-color: #4FA7FF;
-	color: white;
-}
-
-.vs-dark .extensions-viewlet .monaco-list-row.selected .extension-container > .extension {
-	box-shadow: 2px 2px 5px rgba(0,0,0,.7);
-	background-color: #0E639C;
-	color: white;
-}
\ No newline at end of file
+/*.extensions-viewlet > .extensions .extension > .details {
+	width: 100%;
+}*/
\ No newline at end of file