Webview API prototype 3 (#44307)

* Webview API prototype 3

Part of #43713

Third try at refining the webview api. This pass reworks  #44165.  Major changes:

- Adds an `id` field to webviews. The id is provided by the extension and identifies the webview. It is used with the new event handling apis.

- Adds a new `onDidChangeActiveEditor` api. This is similar to `onDidChangeActiveTextEditor` but is also fired when you change webviews. It replaces the old `onFocus` and `onBlur` events on the webview itself

- Adds an `onDispose` event ot webviews. This is fired when a webview is closed by the user

- Perist webview state when the editor group changes. This is enabled for all webviews, not just those with keep alive.

* Throw error when trying to access disposed webview

* Improving webview documentation

* Clean up dispose management

* Throw if we receive a bad handle

* Move more event handling to input

* Simplify input updating

* Remove extra container property

* Fixing md security alert button

* Remove extra update container call

* Restore syncing of preview to active editor

* Fixing posting to webview

* Debounce preview updates

* Remove previewUri

* Enable direct window.postMessage instead of window.parent.postMessage

* Fixing scroll position not preserved when updating previews

* Revert parent.postMessage change.

Old behavior was correct

* Properly hide webview container on tab switch

* Make sure we only handle scroll events for the correct document

* Don't try setting negative scroll

* Revert vs code whitespace change

extensions/markdown/media/csp.js

@@ -16,7 +16,6 @@
 			return;
 		}
 		didShow = true;
-		const args = [settings.previewUri];
 
 		const notification = document.createElement('a');
 		notification.innerText = strings.cspAlertMessageText;
@@ -25,8 +24,12 @@
 
 		notification.setAttribute('role', 'button');
 		notification.setAttribute('aria-label',  strings.cspAlertMessageLabel);
-		notification.setAttribute('href', `command:markdown.showPreviewSecuritySelector?${encodeURIComponent(JSON.stringify(args))}`);
-
+		notification.onclick = () => {
+			window.parent.postMessage({
+				command: 'markdown.showPreviewSecuritySelector',
+				args: [settings.source]
+			}, '*');
+		};
 		document.body.appendChild(notification);
 	};
 

extensions/markdown/media/main.js

@@ -146,7 +146,7 @@
 			} else {
 				scrollTo = previous.element.getBoundingClientRect().top;
 			}
-			window.scroll(0, window.scrollY + scrollTo + getSourceRevealAddedOffset());
+			window.scroll(0, Math.max(1, window.scrollY + scrollTo + getSourceRevealAddedOffset()));
 		}
 	}
 
@@ -193,13 +193,13 @@
 
 	function onLoad() {
 		if (settings.scrollPreviewWithEditorSelection) {
-			const initialLine = +settings.line;
-			if (!isNaN(initialLine)) {
-				setTimeout(() => {
+			setTimeout(() => {
+				const initialLine = +settings.line;
+				if (!isNaN(initialLine)) {
 					scrollDisabled = true;
 					scrollToRevealSourceLine(initialLine);
-				}, 0);
-			}
+				}
+			}, 0);
 		}
 	}
 
@@ -220,8 +220,13 @@
 			scrollToRevealSourceLine(line);
 		}, 50);
 		return event => {
+			if (event.data.source !== settings.source) {
+				return;
+			}
+
 			const line = +event.data.line;
 			if (!isNaN(line)) {
+				settings.line = line;
 				doScroll(line);
 			}
 		};

extensions/markdown/src/commands/refreshPreview.ts

@@ -3,25 +3,17 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as vscode from 'vscode';
 import { Command } from '../commandManager';
-import { isMarkdownFile, getMarkdownUri, MarkdownPreviewWebviewManager } from '../features/previewContentProvider';
+import { MarkdownPreviewManager } from '../features/previewContentProvider';
 
 export class RefreshPreviewCommand implements Command {
 	public readonly id = 'markdown.refreshPreview';
 
 	public constructor(
-		private readonly webviewManager: MarkdownPreviewWebviewManager
+		private readonly webviewManager: MarkdownPreviewManager
 	) { }
 
-	public execute(resource: string | undefined) {
-		if (resource) {
-			const source = vscode.Uri.parse(resource);
-			this.webviewManager.update(source);
-		} else if (vscode.window.activeTextEditor && isMarkdownFile(vscode.window.activeTextEditor.document)) {
-			this.webviewManager.update(getMarkdownUri(vscode.window.activeTextEditor.document.uri));
-		} else {
-			this.webviewManager.updateAll();
-		}
+	public execute() {
+		this.webviewManager.refresh();
 	}
 }

extensions/markdown/src/commands/showPreview.ts

@@ -6,7 +6,7 @@
 import * as vscode from 'vscode';
 
 import { Command } from '../commandManager';
-import { MarkdownPreviewWebviewManager, } from '../features/previewContentProvider';
+import { MarkdownPreviewManager, } from '../features/previewContentProvider';
 import { TelemetryReporter } from '../telemetryReporter';
 
 
@@ -30,12 +30,12 @@ function getViewColumn(sideBySide: boolean): vscode.ViewColumn | undefined {
 	return active.viewColumn;
 }
 
-function showPreview(
-	webviewManager: MarkdownPreviewWebviewManager,
+async function showPreview(
+	webviewManager: MarkdownPreviewManager,
 	telemetryReporter: TelemetryReporter,
 	uri?: vscode.Uri,
 	sideBySide: boolean = false,
-) {
+): Promise<any> {
 	let resource = uri;
 	if (!(resource instanceof vscode.Uri)) {
 		if (vscode.window.activeTextEditor) {
@@ -53,23 +53,22 @@ function showPreview(
 		return;
 	}
 
-	const view = webviewManager.create(
+	webviewManager.preview(
 		resource,
+		(vscode.window.activeTextEditor && vscode.window.activeTextEditor.viewColumn) || vscode.ViewColumn.One,
 		getViewColumn(sideBySide) || vscode.ViewColumn.Active);
 
 	telemetryReporter.sendTelemetryEvent('openPreview', {
 		where: sideBySide ? 'sideBySide' : 'inPlace',
 		how: (uri instanceof vscode.Uri) ? 'action' : 'pallete'
 	});
-
-	return view;
 }
 
 export class ShowPreviewCommand implements Command {
 	public readonly id = 'markdown.showPreview';
 
 	public constructor(
-		private readonly webviewManager: MarkdownPreviewWebviewManager,
+		private readonly webviewManager: MarkdownPreviewManager,
 		private readonly telemetryReporter: TelemetryReporter
 	) { }
 
@@ -84,7 +83,7 @@ export class ShowPreviewToSideCommand implements Command {
 	public readonly id = 'markdown.showPreviewToSide';
 
 	public constructor(
-		private readonly webviewManager: MarkdownPreviewWebviewManager,
+		private readonly webviewManager: MarkdownPreviewManager,
 		private readonly telemetryReporter: TelemetryReporter
 	) { }
 

extensions/markdown/src/extension.ts

@@ -14,7 +14,7 @@ import { loadDefaultTelemetryReporter } from './telemetryReporter';
 import { loadMarkdownExtensions } from './markdownExtensions';
 import LinkProvider from './features/documentLinkProvider';
 import MDDocumentSymbolProvider from './features/documentSymbolProvider';
-import { MarkdownContentProvider, getMarkdownUri, isMarkdownFile, MarkdownPreviewWebviewManager } from './features/previewContentProvider';
+import { MarkdownContentProvider, MarkdownPreviewManager } from './features/previewContentProvider';
 
 
 export function activate(context: vscode.ExtensionContext) {
@@ -30,20 +30,20 @@ export function activate(context: vscode.ExtensionContext) {
 	const contentProvider = new MarkdownContentProvider(engine, context, cspArbiter, logger);
 	loadMarkdownExtensions(contentProvider, engine);
 
-	const webviewManager = new MarkdownPreviewWebviewManager(contentProvider);
-	context.subscriptions.push(webviewManager);
+	const previewManager = new MarkdownPreviewManager(contentProvider, logger);
+	context.subscriptions.push(previewManager);
 
 	context.subscriptions.push(vscode.languages.registerDocumentSymbolProvider(selector, new MDDocumentSymbolProvider(engine)));
 	context.subscriptions.push(vscode.languages.registerDocumentLinkProvider(selector, new LinkProvider()));
 
-	const previewSecuritySelector = new PreviewSecuritySelector(cspArbiter, webviewManager);
+	const previewSecuritySelector = new PreviewSecuritySelector(cspArbiter, previewManager);
 
 	const commandManager = new CommandManager();
 	context.subscriptions.push(commandManager);
-	commandManager.register(new commands.ShowPreviewCommand(webviewManager, telemetryReporter));
-	commandManager.register(new commands.ShowPreviewToSideCommand(webviewManager, telemetryReporter));
+	commandManager.register(new commands.ShowPreviewCommand(previewManager, telemetryReporter));
+	commandManager.register(new commands.ShowPreviewToSideCommand(previewManager, telemetryReporter));
 	commandManager.register(new commands.ShowSourceCommand());
-	commandManager.register(new commands.RefreshPreviewCommand(webviewManager));
+	commandManager.register(new commands.RefreshPreviewCommand(previewManager));
 	commandManager.register(new commands.RevealLineCommand(logger));
 	commandManager.register(new commands.MoveCursorToPositionCommand());
 	commandManager.register(new commands.ShowPreviewSecuritySelectorCommand(previewSecuritySelector));
@@ -53,19 +53,6 @@ export function activate(context: vscode.ExtensionContext) {
 
 	context.subscriptions.push(vscode.workspace.onDidChangeConfiguration(() => {
 		logger.updateConfiguration();
-		webviewManager.updateConfiguration();
-	}));
-
-	context.subscriptions.push(vscode.window.onDidChangeTextEditorSelection(event => {
-		if (isMarkdownFile(event.textEditor.document)) {
-			const markdownFile = getMarkdownUri(event.textEditor.document.uri);
-			logger.log('updatePreviewForSelection', { markdownFile: markdownFile.toString() });
-
-			vscode.commands.executeCommand('_workbench.htmlPreview.postMessage',
-				markdownFile,
-				{
-					line: event.selections[0].active.line
-				});
-		}
+		previewManager.updateConfiguration();
 	}));
 }