Move webview to use onDidChangeViewState event

After discussions, we settled on making the webview private unlike `TextEditors`. This means that webview events will live on the webview object itself

Fixes #44571

extensions/markdown-language-features/src/features/preview.ts

@@ -56,8 +56,8 @@ export class MarkdownPreview {
 			this.dispose();
 		}, null, this.disposables);
 
-		this.webview.onDidChangeViewColumn(() => {
-			this._onDidChangeViewColumnEmitter.fire();
+		this.webview.onDidChangeViewState(e => {
+			this._onDidChangeViewStateEmitter.fire(e);
 		}, null, this.disposables);
 
 		this.webview.onDidReceiveMessage(e => {
@@ -107,8 +107,8 @@ export class MarkdownPreview {
 	private readonly _onDisposeEmitter = new vscode.EventEmitter<void>();
 	public readonly onDispose = this._onDisposeEmitter.event;
 
-	private readonly _onDidChangeViewColumnEmitter = new vscode.EventEmitter<vscode.ViewColumn>();
-	public readonly onDidChangeViewColumn = this._onDidChangeViewColumnEmitter.event;
+	private readonly _onDidChangeViewStateEmitter = new vscode.EventEmitter<vscode.WebViewOnDidChangeViewStateEvent>();
+	public readonly onDidChangeViewState = this._onDidChangeViewStateEmitter.event;
 
 	public get resource(): vscode.Uri {
 		return this._resource;
@@ -118,7 +118,7 @@ export class MarkdownPreview {
 		this._onDisposeEmitter.fire();
 
 		this._onDisposeEmitter.dispose();
-		this._onDidChangeViewColumnEmitter.dispose();
+		this._onDidChangeViewStateEmitter.dispose();
 		this.webview.dispose();
 
 		disposeAll(this.disposables);

extensions/markdown-language-features/src/features/previewManager.ts

@@ -28,15 +28,8 @@ export class MarkdownPreviewManager {
 		private readonly logger: Logger,
 		private readonly contributions: MarkdownContributions
 	) {
-		vscode.window.onDidChangeActiveEditor(editor => {
-			vscode.commands.executeCommand('setContext', MarkdownPreviewManager.markdownPreviewActiveContextKey,
-				editor && editor.editorType === 'webview' && editor.uri.scheme === MarkdownPreview.previewScheme);
-
-			this.activePreview = editor && editor.editorType === 'webview'
-				? this.previews.find(preview => editor.uri.toString() === preview.uri.toString())
-				: undefined;
-
-			if (editor && editor.editorType === 'texteditor') {
+		vscode.window.onDidChangeActiveTextEditor(editor => {
+			if (editor) {
 				if (isMarkdownFile(editor.document)) {
 					for (const preview of this.previews.filter(preview => !preview.locked)) {
 						preview.update(editor.document.uri);
@@ -44,6 +37,7 @@ export class MarkdownPreviewManager {
 				}
 			}
 		}, null, this.disposables);
+
 	}
 
 	public dispose(): void {
@@ -134,8 +128,13 @@ export class MarkdownPreviewManager {
 			}
 		});
 
-		preview.onDidChangeViewColumn(() => {
+		preview.onDidChangeViewState(({ active }) => {
 			disposeAll(this.previews.filter(otherPreview => preview !== otherPreview && preview!.matches(otherPreview)));
+
+			vscode.commands.executeCommand('setContext', MarkdownPreviewManager.markdownPreviewActiveContextKey,
+				active);
+
+			this.activePreview = active ? preview : undefined;
 		});
 
 		return preview;

src/vs/vscode.proposed.d.ts

@@ -571,15 +571,15 @@ declare module 'vscode' {
 		readonly localResourceRoots?: Uri[];
 	}
 
+	export interface WebViewOnDidChangeViewStateEvent {
+		readonly viewColumn: ViewColumn;
+		readonly active: boolean;
+	}
+
 	/**
 	 * A webview is an editor with html content, like an iframe.
 	 */
 	export interface Webview {
-		/**
-		 * Type identifying the editor as a webview editor.
-		 */
-		readonly editorType: 'webview';
-
 		/**
 		 * Unique identifer of the webview.
 		 */
@@ -618,9 +618,9 @@ declare module 'vscode' {
 		readonly onDidDispose: Event<void>;
 
 		/**
-		 * Fired when the webview's view column changes.
+		 * Fired when the webview's view state changes.
 		 */
-		readonly onDidChangeViewColumn: Event<ViewColumn>;
+		readonly onDidChangeViewState: Event<WebViewOnDidChangeViewStateEvent>;
 
 		/**
 		 * Post a message to the webview content.
@@ -649,13 +649,6 @@ declare module 'vscode' {
 		dispose(): any;
 	}
 
-	export interface TextEditor {
-		/**
-		 * Type identifying the editor as a text editor.
-		 */
-		readonly editorType: 'texteditor';
-	}
-
 	namespace window {
 		/**
 		 * Create and show a new webview.
@@ -666,11 +659,6 @@ declare module 'vscode' {
 		 * @param options Content settings for the webview.
 		 */
 		export function createWebview(uri: Uri, title: string, column: ViewColumn, options: WebviewOptions): Webview;
-
-		/**
-		 * Event fired when the active editor changes.
-		 */
-		export const onDidChangeActiveEditor: Event<TextEditor | Webview | undefined>;
 	}
 
 	//#endregion

src/vs/workbench/api/node/extHost.api.impl.ts

@@ -98,7 +98,7 @@ export function createApiFactory(
 	const extHostHeapService = rpcProtocol.set(ExtHostContext.ExtHostHeapService, new ExtHostHeapService());
 	const extHostDecorations = rpcProtocol.set(ExtHostContext.ExtHostDecorations, new ExtHostDecorations(rpcProtocol));
 	const extHostWebviews = rpcProtocol.set(ExtHostContext.ExtHostWebviews, new ExtHostWebviews(rpcProtocol));
-	const extHostDocumentsAndEditors = rpcProtocol.set(ExtHostContext.ExtHostDocumentsAndEditors, new ExtHostDocumentsAndEditors(rpcProtocol, extHostWebviews));
+	const extHostDocumentsAndEditors = rpcProtocol.set(ExtHostContext.ExtHostDocumentsAndEditors, new ExtHostDocumentsAndEditors(rpcProtocol));
 	const extHostDocuments = rpcProtocol.set(ExtHostContext.ExtHostDocuments, new ExtHostDocuments(rpcProtocol, extHostDocumentsAndEditors));
 	const extHostDocumentContentProviders = rpcProtocol.set(ExtHostContext.ExtHostDocumentContentProviders, new ExtHostDocumentContentProvider(rpcProtocol, extHostDocumentsAndEditors, extHostLogService));
 	const extHostDocumentSaveParticipant = rpcProtocol.set(ExtHostContext.ExtHostDocumentSaveParticipant, new ExtHostDocumentSaveParticipant(extHostLogService, extHostDocuments, rpcProtocol.getProxy(MainContext.MainThreadTextEditors)));
@@ -415,9 +415,6 @@ export function createApiFactory(
 			}),
 			createWebview: proposedApiFunction(extension, (uri: vscode.Uri, title: string, column: vscode.ViewColumn, options: vscode.WebviewOptions) => {
 				return extHostWebviews.createWebview(uri, title, column, options, extension.extensionFolderPath);
-			}),
-			onDidChangeActiveEditor: proposedApiFunction(extension, (listener, thisArg?, disposables?) => {
-				return extHostDocumentsAndEditors.onDidChangeActiveEditor(listener, thisArg, disposables);
 			})
 		};
 

src/vs/workbench/api/node/extHostDocumentsAndEditors.ts

@@ -12,7 +12,6 @@ import { ExtHostTextEditor } from './extHostTextEditor';
 import * as assert from 'assert';
 import * as typeConverters from './extHostTypeConverters';
 import URI from 'vs/base/common/uri';
-import { ExtHostWebview, ExtHostWebviews } from './extHostWebview';
 import { Disposable } from './extHostTypes';
 
 export class ExtHostDocumentsAndEditors implements ExtHostDocumentsAndEditorsShape {
@@ -20,7 +19,6 @@ export class ExtHostDocumentsAndEditors implements ExtHostDocumentsAndEditorsSha
 	private _disposables: Disposable[] = [];
 
 	private _activeEditorId: string;
-	private _activeWebview: ExtHostWebview;
 
 	private readonly _editors = new Map<string, ExtHostTextEditor>();
 	private readonly _documents = new Map<string, ExtHostDocumentData>();
@@ -29,31 +27,15 @@ export class ExtHostDocumentsAndEditors implements ExtHostDocumentsAndEditorsSha
 	private readonly _onDidRemoveDocuments = new Emitter<ExtHostDocumentData[]>();
 	private readonly _onDidChangeVisibleTextEditors = new Emitter<ExtHostTextEditor[]>();
 	private readonly _onDidChangeActiveTextEditor = new Emitter<ExtHostTextEditor>();
-	private readonly _onDidChangeActiveEditor = new Emitter<ExtHostTextEditor | ExtHostWebview>();
 
 	readonly onDidAddDocuments: Event<ExtHostDocumentData[]> = this._onDidAddDocuments.event;
 	readonly onDidRemoveDocuments: Event<ExtHostDocumentData[]> = this._onDidRemoveDocuments.event;
 	readonly onDidChangeVisibleTextEditors: Event<ExtHostTextEditor[]> = this._onDidChangeVisibleTextEditors.event;
 	readonly onDidChangeActiveTextEditor: Event<ExtHostTextEditor> = this._onDidChangeActiveTextEditor.event;
-	readonly onDidChangeActiveEditor: Event<ExtHostTextEditor | ExtHostWebview> = this._onDidChangeActiveEditor.event;
 
 	constructor(
 		private readonly _mainContext: IMainContext,
-		_extHostWebviews?: ExtHostWebviews
-	) {
-		if (_extHostWebviews) {
-			_extHostWebviews.onDidChangeActiveWebview(webview => {
-				if (webview) {
-					if (webview !== this._activeWebview) {
-						this._onDidChangeActiveEditor.fire(webview);
-						this._activeWebview = webview;
-					}
-				} else {
-					this._activeWebview = webview;
-				}
-			}, this, this._disposables);
-		}
-	}
+	) { }
 
 	dispose() {
 		this._disposables = dispose(this._disposables);
@@ -143,9 +125,6 @@ export class ExtHostDocumentsAndEditors implements ExtHostDocumentsAndEditorsSha
 		}
 		if (delta.newActiveEditor !== undefined) {
 			this._onDidChangeActiveTextEditor.fire(this.activeEditor());
-
-			const activeEditor = this.activeEditor();
-			this._onDidChangeActiveEditor.fire(activeEditor || this._activeWebview);
 		}
 	}
 

src/vs/workbench/api/node/extHostTextEditor.ts

@@ -313,8 +313,6 @@ export class ExtHostTextEditorOptions implements vscode.TextEditorOptions {
 
 export class ExtHostTextEditor implements vscode.TextEditor {
 
-	public readonly editorType = 'texteditor';
-
 	private readonly _proxy: MainThreadTextEditorsShape;
 	private readonly _id: string;
 	private readonly _documentData: ExtHostDocumentData;

src/vs/workbench/api/node/extHostWebview.ts

@@ -11,13 +11,13 @@ import { Position } from 'vs/platform/editor/common/editor';
 import { TPromise } from 'vs/base/common/winjs.base';
 
 export class ExtHostWebview implements vscode.Webview {
-	public readonly editorType = 'webview';
 
 	private _title: string;
 	private _html: string;
 	private _options: vscode.WebviewOptions;
 	private _isDisposed: boolean = false;
 	private _viewColumn: vscode.ViewColumn;
+	private _active: boolean;
 
 	public readonly onMessageEmitter = new Emitter<any>();
 	public readonly onDidReceiveMessage: Event<any> = this.onMessageEmitter.event;
@@ -25,8 +25,8 @@ export class ExtHostWebview implements vscode.Webview {
 	public readonly onDisposeEmitter = new Emitter<void>();
 	public readonly onDidDispose: Event<void> = this.onDisposeEmitter.event;
 
-	public readonly onDidChangeViewColumnEmitter = new Emitter<vscode.ViewColumn>();
-	public readonly onDidChangeViewColumn: Event<vscode.ViewColumn> = this.onDidChangeViewColumnEmitter.event;
+	public readonly onDidChangeViewStateEmitter = new Emitter<vscode.WebViewOnDidChangeViewStateEvent>();
+	public readonly onDidChangeViewState: Event<vscode.WebViewOnDidChangeViewStateEvent> = this.onDidChangeViewStateEmitter.event;
 
 	constructor(
 		private readonly _handle: WebviewHandle,
@@ -49,7 +49,7 @@ export class ExtHostWebview implements vscode.Webview {
 
 		this.onDisposeEmitter.dispose();
 		this.onMessageEmitter.dispose();
-		this.onDidChangeViewColumnEmitter.dispose();
+		this.onDidChangeViewStateEmitter.dispose();
 	}
 
 	get uri(): vscode.Uri {
@@ -93,11 +93,21 @@ export class ExtHostWebview implements vscode.Webview {
 		return this._viewColumn;
 	}
 
+	get active(): boolean {
+		this.assertNotDisposed();
+		return this._active;
+	}
+
 	set viewColumn(value: vscode.ViewColumn) {
 		this.assertNotDisposed();
 		this._viewColumn = value;
 	}
 
+	set active(value: boolean) {
+		this.assertNotDisposed();
+		this._active = value;
+	}
+
 	public postMessage(message: any): Thenable<boolean> {
 		this.assertNotDisposed();
 		return this._proxy.$sendMessage(this._handle, message);
@@ -116,12 +126,14 @@ export class ExtHostWebview implements vscode.Webview {
 }
 
 export class ExtHostWebviews implements ExtHostWebviewsShape {
-	private static handlePool = 0;
+	private static handlePool = 1;
 
 	private readonly _proxy: MainThreadWebviewsShape;
 
 	private readonly _webviews = new Map<WebviewHandle, ExtHostWebview>();
 
+	private _activeWebview: ExtHostWebview | undefined;
+
 	constructor(
 		mainContext: IMainContext
 	) {
@@ -151,7 +163,22 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 	}
 
 	$onDidChangeActiveWeview(handle: WebviewHandle | undefined): void {
-		this._onDidChangeActiveWebview.fire(this.getWebview(handle));
+		if (handle) {
+			const webview = this.getWebview(handle);
+			if (webview) {
+				if (webview !== this._activeWebview) {
+					this._activeWebview = webview;
+					webview.active = true;
+					webview.onDidChangeViewStateEmitter.fire({ viewColumn: webview.viewColumn, active: true });
+				}
+			}
+		} else {
+			if (this._activeWebview) {
+				this._activeWebview.active = false;
+				this._activeWebview.onDidChangeViewStateEmitter.fire({ viewColumn: this._activeWebview.viewColumn, active: false });
+				this._activeWebview = undefined;
+			}
+		}
 	}
 
 	$onDidDisposeWeview(handle: WebviewHandle): Thenable<void> {
@@ -159,6 +186,9 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 		if (webview) {
 			webview.onDisposeEmitter.fire();
 			this._webviews.delete(handle);
+			if (this._activeWebview === webview) {
+				this._activeWebview = undefined;
+			}
 		}
 		return TPromise.as(void 0);
 	}
@@ -169,7 +199,7 @@ export class ExtHostWebviews implements ExtHostWebviewsShape {
 			const newViewColumn = typeConverters.toViewColumn(newPosition);
 			if (webview.viewColumn !== newViewColumn) {
 				webview.viewColumn = newViewColumn;
-				webview.onDidChangeViewColumnEmitter.fire(newViewColumn);
+				webview.onDidChangeViewStateEmitter.fire({ viewColumn: newViewColumn, active: webview.active });
 			}
 		}
 	}