use webview in extension editor

fixes #7977 fixes #7970

use webview in extension editor
fixes #7977 fixes #7970
095b208f · Joao Moreno · 51f2d539 · 095b208f · 095b208f · 095b208f
3 changed file
--- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts
+++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts
@@ -18,6 +18,7 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { IRequestService } from 'vs/platform/request/common/request';
 import { IExtensionGalleryService } from 'vs/platform/extensionManagement/common/extensionManagement';
+import { IThemeService } from 'vs/workbench/services/themes/common/themeService';
 import { ExtensionsInput } from './extensionsInput';
 import { IExtensionsWorkbenchService, IExtensionsViewlet, VIEWLET_ID } from './extensions';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
@@ -28,8 +29,18 @@ import { shell } from 'electron';
 import product from 'vs/platform/product';
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { CombinedInstallAction, UpdateAction } from './extensionsActions';
-
-const actionOptions = { icon: true, label: true };
+import WebView from 'vs/workbench/parts/html/browser/webview';
+
+function renderBody(body: string): string {
+	return `<!DOCTYPE html>
+		<html>
+			<head>
+				<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+				<link rel="stylesheet" type="text/css" href="${ require.toUrl('./media/markdown.css') }" >
+			</head>
+			<body>${ body }</body>
+		</html>`;
+}

 export class ExtensionEditor extends BaseEditor {

@@ -58,7 +69,8 @@ export class ExtensionEditor extends BaseEditor {
 		@IInstantiationService private instantiationService: IInstantiationService,
 		@IRequestService private requestService: IRequestService,
 		@IViewletService private viewletService: IViewletService,
-		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService
+		@IExtensionsWorkbenchService private extensionsWorkbenchService: IExtensionsWorkbenchService,
+		@IThemeService private themeService: IThemeService
 	) {
 		super(ExtensionEditor.ID, telemetryService);
 		this._highlight = null;
@@ -96,6 +108,7 @@ export class ExtensionEditor extends BaseEditor {

 		const actions = append(details, $('.actions'));
 		this.actionBar = new ActionBar(actions, { animated: false });
+		this.disposables.push(this.actionBar);

 		this.body = append(root, $('.body'));
 	}
@@ -103,8 +116,6 @@ export class ExtensionEditor extends BaseEditor {
 	setInput(input: ExtensionsInput, options: EditorOptions): TPromise<void> {
 		this.transientDisposables = dispose(this.transientDisposables);

-		this.body.innerHTML = '';
-
 		let promise = TPromise.as(null);
 		const extension = input.extension;

@@ -136,9 +147,10 @@ export class ExtensionEditor extends BaseEditor {
 		const installAction = this.instantiationService.createInstance(CombinedInstallAction, extension);
 		const updateAction = this.instantiationService.createInstance(UpdateAction, extension);
 		this.actionBar.clear();
-		this.actionBar.push([updateAction, installAction], actionOptions);
+		this.actionBar.push([updateAction, installAction], { icon: true, label: true });
 		this.transientDisposables.push(updateAction, installAction);

+		this.body.innerHTML = '';
 		addClass(this.body, 'loading');

 		if (extension.readmeUrl) {
@@ -146,7 +158,19 @@ export class ExtensionEditor extends BaseEditor {
 				.then(() => this.requestService.makeRequest({ url: extension.readmeUrl }))
 				.then(response => response.responseText)
 				.then(marked.parse)
-				.then<void>(html => this.body.innerHTML = html)
+				.then<void>(body => {
+					const webview = new WebView(
+						this.body,
+						document.querySelector('.monaco-editor-background'),
+						link => shell.openExternal(link.toString())
+					);
+
+					webview.style(this.themeService.getTheme());
+					webview.contents = [renderBody(body)];
+
+					const listener = this.themeService.onDidThemeChange(themeId => webview.style(themeId));
+					this.transientDisposables.push(webview, listener);
+				})
 				.then(null, () => null)
 				.then(() => removeClass(this.body, 'loading'));
 		}

--- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css
+++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css
@@ -6,8 +6,6 @@
 .extension-editor {
 	height: 100%;
 	overflow: hidden;
-	display: flex;
-	flex-direction: column;
 }

 .extension-editor a {
@@ -104,14 +102,8 @@
 }

 .extension-editor > .body {
-	flex: 1;
-	overflow-y: scroll;
-	overflow-x: hidden;
-	padding: 20px;
-}
-
-.extension-editor > .body img {
-	max-width: 100%;
+	height: calc(100% - 168px);
+	overflow: hidden;
 }

 .extension-editor > .body.loading {

--- a/src/vs/workbench/parts/extensions/electron-browser/media/markdown.css
+++ b/src/vs/workbench/parts/extensions/electron-browser/media/markdown.css
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+body {
+	font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
+	font-size: 14px;
+	padding: 10px 20px;
+	line-height: 22px;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+a {
+	color: #4080D0;
+	text-decoration: none;
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+	outline: 1px solid -webkit-focus-ring-color;
+	outline-offset: -1px;
+}
+
+hr {
+	border: 0;
+	height: 2px;
+	border-bottom: 2px solid;
+}
+
+h1 {
+	padding-bottom: 0.3em;
+	line-height: 1.2;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+h1, h2, h3 {
+	font-weight: normal;
+}
+
+a:hover {
+	color: #4080D0;
+	text-decoration: underline;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+table > thead > tr > th {
+	text-align: left;
+	border-bottom: 1px solid;
+}
+
+table > thead > tr > th,
+table > thead > tr > td,
+table > tbody > tr > th,
+table > tbody > tr > td {
+	padding: 5px 10px;
+}
+
+table > tbody > tr + tr > td {
+	border-top: 1px solid;
+}
+
+blockquote {
+	margin: 0 7px 0 5px;
+	padding: 0 16px 0 10px;
+	border-left: 5px solid;
+}
+
+code {
+	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
+	font-size: 14px;
+	line-height: 19px;
+}
+
+.mac code {
+	font-size: 12px;
+	line-height: 18px;
+}
+
+code > div {
+	padding: 16px;
+	border-radius: 3px;
+	overflow: auto;
+}
+
+/** Theming */
+
+.vscode-light {
+	color: rgb(30, 30, 30);
+}
+
+.vscode-dark {
+	color: #DDD;
+}
+
+.vscode-high-contrast {
+	color: white;
+}
+
+.vscode-light code {
+	color: #A31515;
+}
+
+.vscode-dark code {
+	color: #D7BA7D;
+}
+
+.vscode-light code > div {
+	background-color: rgba(220, 220, 220, 0.4);
+}
+
+.vscode-dark code > div {
+	background-color: rgba(10, 10, 10, 0.4);
+}
+
+.vscode-high-contrast code > div {
+	background-color: rgb(0, 0, 0);
+}
+
+.vscode-high-contrast h1 {
+	border-color: rgb(0, 0, 0);
+}
+
+.vscode-light table > thead > tr > th {
+	border-color: rgba(0, 0, 0, 0.69);
+}
+
+.vscode-dark table > thead > tr > th {
+	border-color: rgba(255, 255, 255, 0.69);
+}
+
+.vscode-light h1,
+.vscode-light hr,
+.vscode-light table > tbody > tr + tr > td {
+	border-color: rgba(0, 0, 0, 0.18);
+}
+
+.vscode-dark h1,
+.vscode-dark hr,
+.vscode-dark table > tbody > tr + tr > td {
+	border-color: rgba(255, 255, 255, 0.18);
+}
+
+.vscode-light blockquote,
+.vscode-dark blockquote {
+	background: rgba(127, 127, 127, 0.1);
+	border-color: rgba(0, 122, 204, 0.5);
+}
+
+.vscode-high-contrast blockquote {
+	background: transparent;
+	border-color: #fff;
+}
\ No newline at end of file