Merge from vscode f5d3ffa6a0d655c87e1eb0e1e90773df58f7ff25 (#7929)

* Merge from vscode f5d3ffa6a0d655c87e1eb0e1e90773df58f7ff25

* fix launch script

* add missing files

extensions/image-preview/media/main.js

@@ -138,6 +138,34 @@
 		updateScale(scale);
 	}
 
+	function zoomIn() {
+		if (scale === 'fit') {
+			firstZoom();
+		}
+
+		let i = 0;
+		for (; i < zoomLevels.length; ++i) {
+			if (zoomLevels[i] > scale) {
+				break;
+			}
+		}
+		updateScale(zoomLevels[i] || MAX_SCALE);
+	}
+
+	function zoomOut() {
+		if (scale === 'fit') {
+			firstZoom();
+		}
+
+		let i = zoomLevels.length - 1;
+		for (; i >= 0; --i) {
+			if (zoomLevels[i] < scale) {
+				break;
+			}
+		}
+		updateScale(zoomLevels[i] || MIN_SCALE);
+	}
+
 	window.addEventListener('keydown', (/** @type {KeyboardEvent} */ e) => {
 		if (!image || !hasLoadedImage) {
 			return;
@@ -204,21 +232,9 @@
 		}
 
 		if (!(isMac ? altPressed : ctrlPressed)) { // zoom in
-			let i = 0;
-			for (; i < zoomLevels.length; ++i) {
-				if (zoomLevels[i] > scale) {
-					break;
-				}
-			}
-			updateScale(zoomLevels[i] || MAX_SCALE);
+			zoomIn();
 		} else {
-			let i = zoomLevels.length - 1;
-			for (; i >= 0; --i) {
-				if (zoomLevels[i] < scale) {
-					break;
-				}
-			}
-			updateScale(zoomLevels[i] || MIN_SCALE);
+			zoomOut();
 		}
 	});
 
@@ -232,9 +248,6 @@
 			return;
 		}
 
-		e.preventDefault();
-		e.stopPropagation();
-
 		if (scale === 'fit') {
 			firstZoom();
 		}
@@ -290,9 +303,18 @@
 			case 'setScale':
 				updateScale(e.data.scale);
 				break;
+
 			case 'setActive':
 				changeActive(e.data.value);
 				break;
+
+			case 'zoomIn':
+				zoomIn();
+				break;
+
+			case 'zoomOut':
+				zoomOut();
+				break;
 		}
 	});
 }());

extensions/image-preview/package.json

@@ -17,7 +17,9 @@
     "Other"
   ],
   "activationEvents": [
-    "onWebviewEditor:imagePreview.previewEditor"
+    "onWebviewEditor:imagePreview.previewEditor",
+    "onCommand:imagePreview.zoomIn",
+    "onCommand:imagePreview.zoomOut"
   ],
   "contributes": {
     "webviewEditors": [
@@ -32,7 +34,33 @@
           }
         ]
       }
-    ]
+    ],
+    "commands": [
+      {
+        "command": "imagePreview.zoomIn",
+        "title": "%command.zoomIn%",
+        "category": "Image Preview"
+      },
+      {
+        "command": "imagePreview.zoomOut",
+        "title": "%command.zoomOut%",
+        "category": "Image Preview"
+      }
+    ],
+    "menus": {
+      "commandPalette": [
+        {
+          "command": "imagePreview.zoomIn",
+          "when": "imagePreviewFocus",
+          "group": "1_imagePreview"
+        },
+        {
+          "command": "imagePreview.zoomOut",
+          "when": "imagePreviewFocus",
+          "group": "1_imagePreview"
+        }
+      ]
+    }
   },
   "scripts": {
     "compile": "gulp compile-extension:image-preview",

extensions/image-preview/package.nls.json

@@ -1,5 +1,7 @@
 {
 	"displayName": "Image Preview",
 	"description": "Provides VS Code's built-in image preview",
-	"webviewEditors.displayName": "Image Preview"
+	"webviewEditors.displayName": "Image Preview",
+	"command.zoomIn": "Zoom in",
+	"command.zoomOut": "Zoom out"
 }

extensions/image-preview/src/extension.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as vscode from 'vscode';
-import { Preview } from './preview';
+import { PreviewManager } from './preview';
 import { SizeStatusBarEntry } from './sizeStatusBarEntry';
 import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
 
@@ -17,12 +17,22 @@ export function activate(context: vscode.ExtensionContext) {
 	const zoomStatusBarEntry = new ZoomStatusBarEntry();
 	context.subscriptions.push(zoomStatusBarEntry);
 
+	const previewManager = new PreviewManager(extensionRoot, sizeStatusBarEntry, zoomStatusBarEntry);
+
 	context.subscriptions.push(vscode.window.registerWebviewEditorProvider(
-		Preview.viewType,
+		PreviewManager.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);
+				previewManager.resolve(resource, editor);
 			}
 		}));
+
+	context.subscriptions.push(vscode.commands.registerCommand('imagePreview.zoomIn', () => {
+		previewManager.activePreview?.zoomIn();
+	}));
+
+	context.subscriptions.push(vscode.commands.registerCommand('imagePreview.zoomOut', () => {
+		previewManager.activePreview?.zoomOut();
+	}));
 }
+

extensions/image-preview/src/preview.ts

@@ -11,15 +11,58 @@ import { Scale, ZoomStatusBarEntry } from './zoomStatusBarEntry';
 
 const localize = nls.loadMessageBundle();
 
+
+export class PreviewManager {
+
+	public static readonly viewType = 'imagePreview.previewEditor';
+
+	private readonly _previews = new Set<Preview>();
+	private _activePreview: Preview | undefined;
+
+	constructor(
+		private readonly extensionRoot: vscode.Uri,
+		private readonly sizeStatusBarEntry: SizeStatusBarEntry,
+		private readonly zoomStatusBarEntry: ZoomStatusBarEntry,
+	) { }
+
+	public resolve(
+		resource: vscode.Uri,
+		webviewEditor: vscode.WebviewEditor,
+	) {
+		const preview = new Preview(this.extensionRoot, resource, webviewEditor, this.sizeStatusBarEntry, this.zoomStatusBarEntry);
+		this._previews.add(preview);
+		this.setActivePreview(preview);
+
+		webviewEditor.onDidDispose(() => { this._previews.delete(preview); });
+
+		webviewEditor.onDidChangeViewState(() => {
+			if (webviewEditor.active) {
+				this.setActivePreview(preview);
+			} else if (this._activePreview === preview && !webviewEditor.active) {
+				this.setActivePreview(undefined);
+			}
+		});
+	}
+
+	public get activePreview() { return this._activePreview; }
+
+	private setActivePreview(value: Preview | undefined): void {
+		this._activePreview = value;
+		this.setPreviewActiveContext(!!value);
+	}
+
+	private setPreviewActiveContext(value: boolean) {
+		vscode.commands.executeCommand('setContext', 'imagePreviewFocus', value);
+	}
+}
+
 const enum PreviewState {
 	Disposed,
 	Visible,
 	Active,
 }
 
-export class Preview extends Disposable {
-
-	public static readonly viewType = 'imagePreview.previewEditor';
+class Preview extends Disposable {
 
 	private readonly id: string = `${Date.now()}-${Math.random().toString()}`;
 
@@ -98,6 +141,18 @@ export class Preview extends Disposable {
 		this.update();
 	}
 
+	public zoomIn() {
+		if (this._previewState === PreviewState.Active) {
+			this.webviewEditor.webview.postMessage({ type: 'zoomIn' });
+		}
+	}
+
+	public zoomOut() {
+		if (this._previewState === PreviewState.Active) {
+			this.webviewEditor.webview.postMessage({ type: 'zoomOut' });
+		}
+	}
+
 	private render() {
 		if (this._previewState !== PreviewState.Disposed) {
 			this.webviewEditor.webview.html = this.getWebiewContents();