extension details

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

@@ -27,6 +27,11 @@ export class ExtensionEditor extends BaseEditor {
 	static ID: string = 'workbench.editor.extension';
 
 	private icon: HTMLElement;
+	private name: HTMLElement;
+	private publisher: HTMLElement;
+	private installCount: HTMLElement;
+	private rating: HTMLElement;
+	private description: HTMLElement;
 	private body: HTMLElement;
 
 	private _highlight: ITemplateData;
@@ -55,9 +60,17 @@ export class ExtensionEditor extends BaseEditor {
 		const header = append(root, $('.header'));
 
 		this.icon = append(header, $('.icon'));
-		// const details = append(header, $('.details'));
 
-		// header.innerText = 'here goes description, author name, links, ratings, install buttons, etc';
+		const details = append(header, $('.details'));
+		this.name = append(details, $('.name'));
+
+		const subtitle = append(details, $('.subtitle'));
+		this.publisher = append(subtitle, $('span.publisher'));
+		this.installCount = append(subtitle, $('span.install'));
+		this.rating = append(subtitle, $('span.rating'));
+
+		this.description = append(details, $('p.description'));
+
 		this.body = append(root, $('.body'));
 	}
 
@@ -70,6 +83,9 @@ export class ExtensionEditor extends BaseEditor {
 		const extension = input.extension;
 
 		this.icon.style.backgroundImage = `url("${ extension.iconUrl }")`;
+		this.name.textContent = extension.displayName;
+		this.publisher.textContent = extension.publisherDisplayName;
+		this.description.textContent = extension.description;
 
 		if (!extension.readmeUrl) {
 			this.body.innerHTML = 'no readme :(';

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

@@ -8,23 +8,42 @@
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	/*padding: 20px;*/
 }
 
 .extension-editor > .header {
+	display: flex;
 	height: 128px;
-	background: rgba(128, 128, 128, 0.15); /* TODO */
+	background: rgba(128, 128, 128, 0.15);
 	padding: 20px;
+	overflow: hidden;
 }
 
 .extension-editor > .header > .icon {
 	height: 128px;
 	width: 128px;
+	min-width: 128px;
 	background-size: 128px;
 	background-repeat: no-repeat;
 	background-position: center center;
 }
 
+.extension-editor > .header > .details {
+	flex: 1;
+	padding-left: 20px;
+	overflow: hidden;
+}
+
+.extension-editor > .header > .details > .name {
+	font-size: 26px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+.extension-editor > .header > .details > .subtitle {
+	font-size: 18px;
+	padding-top: 10px;
+}
+
 .extension-editor > .body {
 	flex: 1;
 	overflow-y: scroll;