extension editor: show settings contributions

src/vs/platform/extensionManagement/common/extensionManagement.ts

@@ -12,6 +12,72 @@ import { IPager } from 'vs/base/common/paging';
 import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
 import { IRequestContext } from 'vs/base/node/request';
 
+export interface ICommand {
+	command: string;
+	title: string;
+	category?: string;
+}
+
+export interface IConfigurationProperty {
+	description: string;
+	type: string | string[];
+}
+
+export interface IConfiguration {
+	properties: { [key: string]: IConfigurationProperty; };
+}
+
+export interface IDebugger {
+	label: string;
+	runtime: string;
+}
+
+export interface IGrammar {
+	language: string;
+}
+
+export interface IJSONValidation {
+	fileMatch: string;
+}
+
+export interface IKeyBindings {
+	command: string;
+	key: string;
+	when?: string;
+	mac?: string;
+	linux?: string;
+	win?: string;
+}
+
+export interface ILanguage {
+	id: string;
+	extensions: string[];
+	aliases: string[];
+}
+
+export interface IMenu {
+	command: string;
+	alt?: string;
+	when?: string;
+	group?: string;
+}
+
+export interface ISnippet {
+	language: string;
+}
+
+export interface IExtensionContributions {
+	commands?: ICommand[];
+	configuration?: IConfiguration;
+	debuggers?: IDebugger[];
+	grammars?: IGrammar[];
+	jsonValidation?: IJSONValidation[];
+	keybindings?: IKeyBindings[];
+	languages?: ILanguage[];
+	menus?: { [context: string]: IMenu[] };
+	snippets?: ISnippet[];
+}
+
 export interface IExtensionManifest {
 	name: string;
 	publisher: string;
@@ -21,6 +87,9 @@ export interface IExtensionManifest {
 	description?: string;
 	main?: string;
 	icon?: string;
+	categories?: string[];
+	activationEvents?: string[];
+	contributes?: IExtensionContributions;
 }
 
 export interface IExtensionIdentity {

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

@@ -90,7 +90,7 @@ class NavBar {
 
 const NavbarSection = {
 	Readme: 'readme',
-	Configuration: 'configuration'
+	Contributions: 'contributions'
 };
 
 export class ExtensionEditor extends BaseEditor {
@@ -223,8 +223,8 @@ export class ExtensionEditor extends BaseEditor {
 
 		this.navbar.clear();
 		this.navbar.onChange(this.onNavbarChange.bind(this, extension), this, this.transientDisposables);
-		this.navbar.push(NavbarSection.Readme, localize('readme', "Readme"));
-		this.navbar.push(NavbarSection.Configuration, localize('configuration', "Config"));
+		this.navbar.push(NavbarSection.Readme, localize('details', "Details"));
+		this.navbar.push(NavbarSection.Contributions, localize('contributions', "Contributions"));
 
 		this.content.innerHTML = '';
 
@@ -234,7 +234,7 @@ export class ExtensionEditor extends BaseEditor {
 	private onNavbarChange(extension: IExtension, id: string): void {
 		switch (id) {
 			case NavbarSection.Readme: return this.openReadme(extension);
-			case NavbarSection.Configuration: return this.openConfiguration(extension);
+			case NavbarSection.Contributions: return this.openContributions(extension);
 		}
 	}
 
@@ -260,14 +260,26 @@ export class ExtensionEditor extends BaseEditor {
 			}));
 	}
 
-	private openConfiguration(extension: IExtension) {
-		return this.loadContents(() => {
-			return new TPromise(c => {
+	private openContributions(extension: IExtension) {
+		return this.loadContents(() => extension.getManifest()
+			.then(manifest => {
 				this.content.innerHTML = '';
-				this.content.innerText = 'configuration';
-				c(null);
-			});
-		});
+				const content = append(this.content, $('div', { class: 'subcontent' }));
+
+				const configuration = manifest.contributes.configuration;
+				const properties = configuration && configuration.properties;
+				const settings = properties ? Object.keys(properties) : [];
+
+				if (settings.length) {
+					append(content, $('details', { open: true },
+						$('summary', null, localize('settings', "Settings ({0})", settings.length)),
+						$('table', { class: 'settings' },
+							$('tr', null, $('th', null, localize('setting name', "Name")), $('th', null, localize('description', "Description"))),
+							...settings.map(key => $('tr', null, $('td', null, $('code', null, key)), $('td', null, properties[key].description)))
+						)
+					));
+				}
+			}));
 	}
 
 	private loadContents(loadingTask: ()=>TPromise<any>): void {

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

@@ -135,5 +135,65 @@
 
 .extension-editor > .body > .content {
 	height: calc(100% - 36px);
-	overflow: hidden;
-}
\ No newline at end of file
+}
+
+.extension-editor > .body > .content > .subcontent {
+	height: 100%;
+	padding: 20px;
+	overflow-y: scroll;
+	box-sizing: border-box;
+}
+
+.extension-editor > .body > .content table {
+	border-spacing: 0;
+	border-collapse: separate;
+}
+
+.extension-editor > .body > .content details > summary {
+	cursor: pointer;
+	margin-bottom: 10px;
+	font-weight: bold;
+	font-size: 120%;
+}
+
+.extension-editor > .body > .content details > summary:focus {
+	outline: none;
+}
+
+.extension-editor > .body > .content details > summary::-webkit-details-marker {
+	color: rgba(128, 128, 128, 0.5);
+}
+
+.extension-editor > .body > .content table tr:nth-child(odd) {
+	background-color: rgba(130, 130, 130, 0.04);
+}
+
+.extension-editor > .body > .content table tr:not(:first-child):hover {
+	background-color: rgba(128, 128, 128, 0.15);
+}
+
+.extension-editor > .body > .content table th {
+	border-bottom: 1px solid rgba(144, 144, 144, 0.5);
+}
+
+.extension-editor > .body > .content table th,
+.extension-editor > .body > .content table td {
+	padding: 2px 16px 2px 4px;
+}
+
+.extension-editor > .body > .content table th:last-child,
+.extension-editor > .body > .content table td:last-child {
+	padding: 2px 4px;
+}
+
+.extension-editor > .body > .content table th {
+	text-align: left;
+}
+
+.extension-editor table.settings code {
+	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
+	font-size: 80%;
+	background-color: rgba(128, 128, 128, 0.17);
+	border-radius: 4px;
+	padding: 1px 4px;
+}