Merge from vscode 64980ea1f3f532c82bb6c28d27bba9ef2c5b4463 (#7206)

* Merge from vscode 64980ea1f3f532c82bb6c28d27bba9ef2c5b4463

* fix config changes

* fix strictnull checks

extensions/image-preview/src/dispose.ts

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+
+export function disposeAll(disposables: vscode.Disposable[]) {
+	while (disposables.length) {
+		const item = disposables.pop();
+		if (item) {
+			item.dispose();
+		}
+	}
+}
+
+export abstract class Disposable {
+	private _isDisposed = false;
+
+	protected _disposables: vscode.Disposable[] = [];
+
+	public dispose(): any {
+		if (this._isDisposed) {
+			return;
+		}
+		this._isDisposed = true;
+		disposeAll(this._disposables);
+	}
+
+	protected _register<T extends vscode.Disposable>(value: T): T {
+		if (this._isDisposed) {
+			value.dispose();
+		} else {
+			this._disposables.push(value);
+		}
+		return value;
+	}
+
+	protected get isDisposed() {
+		return this._isDisposed;
+	}
+}

extensions/image-preview/src/extension.ts

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { Preview } from './preview';
+import { SizeStatusBarEntry } from './sizeStatusBarEntry';
+import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
+
+export function activate(context: vscode.ExtensionContext) {
+	const extensionRoot = vscode.Uri.file(context.extensionPath);
+
+	const sizeStatusBarEntry = new SizeStatusBarEntry();
+	context.subscriptions.push(sizeStatusBarEntry);
+
+	const zoomStatusBarEntry = new ZoomStatusBarEntry();
+	context.subscriptions.push(zoomStatusBarEntry);
+
+	context.subscriptions.push(vscode.window.registerWebviewEditorProvider(
+		Preview.viewType,
+		{
+			async resolveWebviewEditor(resource: vscode.Uri, editor: vscode.WebviewEditor): Promise<void> {
+				// tslint:disable-next-line: no-unused-expression
+				new Preview(extensionRoot, resource, editor, sizeStatusBarEntry, zoomStatusBarEntry);
+			}
+		}));
+}

extensions/image-preview/src/preview.ts

@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { SizeStatusBarEntry } from './sizeStatusBarEntry';
+import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
+import { Disposable } from './dispose';
+
+export class Preview extends Disposable {
+
+	public static readonly viewType = 'imagePreview.previewEditor';
+
+	private _active = true;
+
+	constructor(
+		private readonly extensionRoot: vscode.Uri,
+		resource: vscode.Uri,
+		private readonly webviewEditor: vscode.WebviewEditor,
+		private readonly sizeStatusBarEntry: SizeStatusBarEntry,
+		private readonly zoomStatusBarEntry: ZoomStatusBarEntry,
+	) {
+		super();
+		const resourceRoot = resource.with({
+			path: resource.path.replace(/\/[^\/]+?\.\w+$/, '/'),
+		});
+
+		webviewEditor.webview.options = {
+			enableScripts: true,
+			localResourceRoots: [
+				resourceRoot,
+				extensionRoot,
+			]
+		};
+
+		webviewEditor.webview.html = this.getWebiewContents(webviewEditor, resource);
+
+		this._register(webviewEditor.webview.onDidReceiveMessage(message => {
+			switch (message.type) {
+				case 'size':
+					{
+						this.sizeStatusBarEntry.update(message.value);
+						break;
+					}
+				case 'zoom':
+					{
+						this.zoomStatusBarEntry.update(message.value);
+						break;
+					}
+			}
+		}));
+
+		this._register(zoomStatusBarEntry.onDidChangeScale(e => {
+			this.webviewEditor.webview.postMessage({ type: 'setScale', scale: e.scale });
+		}));
+
+		this._register(webviewEditor.onDidChangeViewState(() => {
+			this.update();
+		}));
+		this._register(webviewEditor.onDidDispose(() => {
+			if (this._active) {
+				this.sizeStatusBarEntry.hide();
+				this.zoomStatusBarEntry.hide();
+			}
+		}));
+		this.update();
+	}
+
+	private update() {
+		this._active = this.webviewEditor.active;
+		if (this._active) {
+			this.sizeStatusBarEntry.show();
+			this.zoomStatusBarEntry.show();
+		} else {
+			this.sizeStatusBarEntry.hide();
+			this.zoomStatusBarEntry.hide();
+		}
+	}
+
+	private getWebiewContents(webviewEditor: vscode.WebviewEditor, resource: vscode.Uri): string {
+		const settings = {
+			isMac: process.platform === 'darwin'
+		};
+
+		return /* html */`<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Image Preview</title>
+	<link rel="stylesheet" class="code-user-style" href="${escapeAttribute(this.extensionResource('/media/main.css'))}" type="text/css" media="screen">
+
+	<meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
+</head>
+<body class="container image scale-to-fit">
+	<img src="${escapeAttribute(webviewEditor.webview.asWebviewUri(resource))}">
+	<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}"></script>
+</body>
+</html>`;
+	}
+
+	private extensionResource(path: string) {
+		return this.webviewEditor.webview.asWebviewUri(this.extensionRoot.with({
+			path: this.extensionRoot.path + path
+		}));
+	}
+}
+
+function escapeAttribute(value: string | vscode.Uri): string {
+	return value.toString().replace(/"/g, '&quot;');
+}

extensions/image-preview/src/sizeStatusBarEntry.ts

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { Disposable } from './dispose';
+
+export class SizeStatusBarEntry extends Disposable {
+	private readonly _entry: vscode.StatusBarItem;
+
+	constructor() {
+		super();
+		this._entry = this._register(vscode.window.createStatusBarItem({
+			id: 'imagePreview.size',
+			name: 'Image Size',
+			alignment: vscode.StatusBarAlignment.Right,
+			priority: 101 /* to the left of editor status (100) */,
+		}));
+	}
+
+	public show() {
+		this._entry.show();
+	}
+
+	public hide() {
+		this._entry.hide();
+	}
+
+	public update(text: string) {
+		this._entry.text = text;
+	}
+}

extensions/image-preview/src/typings/ref.d.ts

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/// <reference path='../../../../src/vs/vscode.d.ts'/>
+/// <reference path='../../../../src/vs/vscode.proposed.d.ts'/>
+/// <reference types='@types/node'/>

extensions/image-preview/src/zoomStatusBarEntry.ts

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import * as nls from 'vscode-nls';
+import { Disposable } from './dispose';
+
+const localize = nls.loadMessageBundle();
+
+const selectZoomLevelCommandId = '_imagePreview.selectZoomLevel';
+
+type Scale = number | 'fit';
+
+export class ZoomStatusBarEntry extends Disposable {
+	private readonly _entry: vscode.StatusBarItem;
+
+	private readonly _onDidChangeScale = this._register(new vscode.EventEmitter<{ scale: Scale }>());
+	public readonly onDidChangeScale = this._onDidChangeScale.event;
+
+	constructor() {
+		super();
+		this._entry = this._register(vscode.window.createStatusBarItem({
+			id: 'imagePreview.zoom',
+			name: 'Image Zoom',
+			alignment: vscode.StatusBarAlignment.Right,
+			priority: 102 /* to the left of editor size entry (101) */,
+		}));
+
+		this._register(vscode.commands.registerCommand(selectZoomLevelCommandId, async () => {
+			type MyPickItem = vscode.QuickPickItem & { scale: Scale };
+
+			const scales: Scale[] = [10, 5, 2, 1, 0.5, 0.2, 'fit'];
+			const options = scales.map((scale): MyPickItem => ({
+				label: this.zoomLabel(scale),
+				scale
+			}));
+
+			const pick = await vscode.window.showQuickPick(options, {
+				placeHolder: localize('zoomStatusBar.placeholder', "Select zoom level")
+			});
+			if (pick) {
+				this._onDidChangeScale.fire({ scale: pick.scale });
+			}
+		}));
+
+		this._entry.command = selectZoomLevelCommandId;
+	}
+
+	public show() {
+		this._entry.show();
+	}
+
+	public hide() {
+		this._entry.hide();
+	}
+
+	public update(scale: Scale) {
+		this._entry.text = this.zoomLabel(scale);
+	}
+
+	private zoomLabel(scale: Scale): string {
+		return scale === 'fit'
+			? localize('zoomStatusBar.wholeImageLabel', "Whole Image")
+			: `${Math.round(scale * 100)}%`;
+	}
+}