Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998 (#7880)

* Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998

* fix pipelines

* fix strict-null-checks

* add missing files

extensions/image-preview/src/preview.ts

@@ -4,19 +4,32 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as vscode from 'vscode';
-import { SizeStatusBarEntry } from './sizeStatusBarEntry';
-import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
+import * as nls from 'vscode-nls';
 import { Disposable } from './dispose';
+import { SizeStatusBarEntry } from './sizeStatusBarEntry';
+import { Scale, ZoomStatusBarEntry } from './zoomStatusBarEntry';
+
+const localize = nls.loadMessageBundle();
+
+const enum PreviewState {
+	Disposed,
+	Visible,
+	Active,
+}
 
 export class Preview extends Disposable {
 
 	public static readonly viewType = 'imagePreview.previewEditor';
 
-	private _active = true;
+	private readonly id: string = `${Date.now()}-${Math.random().toString()}`;
+
+	private _previewState = PreviewState.Visible;
+	private _imageSize: string | undefined;
+	private _imageZoom: Scale | undefined;
 
 	constructor(
 		private readonly extensionRoot: vscode.Uri,
-		resource: vscode.Uri,
+		private readonly resource: vscode.Uri,
 		private readonly webviewEditor: vscode.WebviewEditor,
 		private readonly sizeStatusBarEntry: SizeStatusBarEntry,
 		private readonly zoomStatusBarEntry: ZoomStatusBarEntry,
@@ -34,56 +47,91 @@ export class Preview extends Disposable {
 			]
 		};
 
-		webviewEditor.webview.html = this.getWebiewContents(webviewEditor, resource);
-
 		this._register(webviewEditor.webview.onDidReceiveMessage(message => {
 			switch (message.type) {
 				case 'size':
 					{
-						this.sizeStatusBarEntry.update(message.value);
+						this._imageSize = message.value;
+						this.update();
 						break;
 					}
 				case 'zoom':
 					{
-						this.zoomStatusBarEntry.update(message.value);
+						this._imageZoom = message.value;
+						this.update();
 						break;
 					}
 			}
 		}));
 
 		this._register(zoomStatusBarEntry.onDidChangeScale(e => {
-			this.webviewEditor.webview.postMessage({ type: 'setScale', scale: e.scale });
+			if (this._previewState === PreviewState.Active) {
+				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();
+			if (this._previewState === PreviewState.Active) {
+				this.sizeStatusBarEntry.hide(this.id);
+				this.zoomStatusBarEntry.hide(this.id);
+			}
+			this._previewState = PreviewState.Disposed;
+		}));
+
+		const watcher = this._register(vscode.workspace.createFileSystemWatcher(resource.fsPath));
+		this._register(watcher.onDidChange(e => {
+			if (e.toString() === this.resource.toString()) {
+				this.render();
 			}
 		}));
+		this._register(watcher.onDidDelete(e => {
+			if (e.toString() === this.resource.toString()) {
+				this.webviewEditor.dispose();
+			}
+		}));
+
+		this.render();
 		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 render() {
+		if (this._previewState !== PreviewState.Disposed) {
+			this.webviewEditor.webview.html = this.getWebiewContents();
 		}
 	}
 
-	private getWebiewContents(webviewEditor: vscode.WebviewEditor, resource: vscode.Uri): string {
+	private update() {
+		if (this._previewState === PreviewState.Disposed) {
+			return;
+		}
+
+		if (this.webviewEditor.active) {
+			this._previewState = PreviewState.Active;
+			this.sizeStatusBarEntry.show(this.id, this._imageSize || '');
+			this.zoomStatusBarEntry.show(this.id, this._imageZoom || 'fit');
+		} else {
+			if (this._previewState === PreviewState.Active) {
+				this.sizeStatusBarEntry.hide(this.id);
+				this.zoomStatusBarEntry.hide(this.id);
+			}
+			this._previewState = PreviewState.Visible;
+		}
+		this.webviewEditor.webview.postMessage({ type: 'setActive', value: this.webviewEditor.active });
+	}
+
+	private getWebiewContents(): string {
+		const version = Date.now().toString();
 		const settings = {
 			isMac: process.platform === 'darwin',
-			src: this.getResourcePath(webviewEditor, resource)
+			src: this.getResourcePath(this.webviewEditor, this.resource, version),
 		};
 
+		const nonce = Date.now().toString();
+
 		return /* html */`<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -91,23 +139,33 @@ export class Preview extends Disposable {
 	<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">
 
+	<link rel="stylesheet" href="${escapeAttribute(this.extensionResource('/media/main.css'))}" type="text/css" media="screen" nonce="${nonce}">
+
+	<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data: ${this.webviewEditor.webview.cspSource}; script-src 'nonce-${nonce}'; style-src 'self' 'nonce-${nonce}';">
 	<meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
 </head>
-<body class="container image scale-to-fit">
-	<div class='loading'></div>
-	<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}"></script>
+<body class="container image scale-to-fit loading">
+	<div class="loading-indicator"></div>
+	<div class="image-load-error-message">${localize('preview.imageLoadError', "An error occurred while loading the image")}</div>
+	<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}" nonce="${nonce}"></script>
 </body>
 </html>`;
 	}
 
-	private getResourcePath(webviewEditor: vscode.WebviewEditor, resource: vscode.Uri) {
-		if (resource.scheme === 'data') {
-			return encodeURI(resource.toString(true));
-		}
+	private getResourcePath(webviewEditor: vscode.WebviewEditor, resource: vscode.Uri, version: string) {
+		switch (resource.scheme) {
+			case 'data':
+				return encodeURI(resource.toString(true));
 
-		return encodeURI(webviewEditor.webview.asWebviewUri(resource).toString(true));
+			case 'git':
+				// Show blank image
+				return encodeURI('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==');
+
+
+			default:
+				return encodeURI(webviewEditor.webview.asWebviewUri(resource).toString(true) + `?version=${version}`);
+		}
 	}
 
 	private extensionResource(path: string) {

extensions/image-preview/src/sizeStatusBarEntry.ts

@@ -5,29 +5,35 @@
 
 import * as vscode from 'vscode';
 import { Disposable } from './dispose';
+import * as nls from 'vscode-nls';
+
+const localize = nls.loadMessageBundle();
 
 export class SizeStatusBarEntry extends Disposable {
 	private readonly _entry: vscode.StatusBarItem;
 
+	private _showingOwner: string | undefined;
+
 	constructor() {
 		super();
 		this._entry = this._register(vscode.window.createStatusBarItem({
 			id: 'imagePreview.size',
-			name: 'Image Size',
+			name: localize('sizeStatusBar.name', "Image Size"),
 			alignment: vscode.StatusBarAlignment.Right,
 			priority: 101 /* to the left of editor status (100) */,
 		}));
 	}
 
-	public show() {
+	public show(owner: string, text: string) {
+		this._showingOwner = owner;
+		this._entry.text = text;
 		this._entry.show();
 	}
 
-	public hide() {
-		this._entry.hide();
-	}
-
-	public update(text: string) {
-		this._entry.text = text;
+	public hide(owner: string) {
+		if (owner === this._showingOwner) {
+			this._entry.hide();
+			this._showingOwner = undefined;
+		}
 	}
 }

extensions/image-preview/src/zoomStatusBarEntry.ts

@@ -11,7 +11,7 @@ const localize = nls.loadMessageBundle();
 
 const selectZoomLevelCommandId = '_imagePreview.selectZoomLevel';
 
-type Scale = number | 'fit';
+export type Scale = number | 'fit';
 
 export class ZoomStatusBarEntry extends Disposable {
 	private readonly _entry: vscode.StatusBarItem;
@@ -19,11 +19,13 @@ export class ZoomStatusBarEntry extends Disposable {
 	private readonly _onDidChangeScale = this._register(new vscode.EventEmitter<{ scale: Scale }>());
 	public readonly onDidChangeScale = this._onDidChangeScale.event;
 
+	private _showOwner: string | undefined;
+
 	constructor() {
 		super();
 		this._entry = this._register(vscode.window.createStatusBarItem({
 			id: 'imagePreview.zoom',
-			name: 'Image Zoom',
+			name: localize('zoomStatusBar.name', "Image Zoom"),
 			alignment: vscode.StatusBarAlignment.Right,
 			priority: 102 /* to the left of editor size entry (101) */,
 		}));
@@ -48,16 +50,17 @@ export class ZoomStatusBarEntry extends Disposable {
 		this._entry.command = selectZoomLevelCommandId;
 	}
 
-	public show() {
+	public show(owner: string, scale: Scale) {
+		this._showOwner = owner;
+		this._entry.text = this.zoomLabel(scale);
 		this._entry.show();
 	}
 
-	public hide() {
-		this._entry.hide();
-	}
-
-	public update(scale: Scale) {
-		this._entry.text = this.zoomLabel(scale);
+	public hide(owner: string) {
+		if (owner === this._showOwner) {
+			this._entry.hide();
+			this._showOwner = undefined;
+		}
 	}
 
 	private zoomLabel(scale: Scale): string {