Merge pull request microsoft#256802 from mjbvz/positive-crawdad

Add internal API for getting a webview's content size

Author: mjbvz

src/vs/workbench/contrib/webview/browser/overlayWebview.ts

@@ -9,6 +9,7 @@ import { IMouseWheelEvent } from '../../../../base/browser/mouseEvent.js';
 import { CodeWindow } from '../../../../base/browser/window.js';
 import { Emitter } from '../../../../base/common/event.js';
 import { Disposable, DisposableStore, MutableDisposable } from '../../../../base/common/lifecycle.js';
+import { autorun, observableValue } from '../../../../base/common/observable.js';
 import { URI } from '../../../../base/common/uri.js';
 import { generateUuid } from '../../../../base/common/uuid.js';
 import { IContextKey, IContextKeyService, IScopedContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
@@ -256,8 +257,10 @@ export class OverlayWebview extends Disposable implements IOverlayWebview {
 			this._webviewEvents.add(webview.onMessage(x => { this._onMessage.fire(x); }));
 			this._webviewEvents.add(webview.onMissingCsp(x => { this._onMissingCsp.fire(x); }));
 			this._webviewEvents.add(webview.onDidWheel(x => { this._onDidWheel.fire(x); }));
-			this._webviewEvents.add(webview.onDidReload(() => { this._onDidReload.fire(); }));
 			this._webviewEvents.add(webview.onFatalError(x => { this._onFatalError.fire(x); }));
+			this._webviewEvents.add(autorun(reader => {
+				this.intrinsicContentSize.set(reader.readObservable(webview.intrinsicContentSize), undefined, undefined);
+			}));
 
 			this._webviewEvents.add(webview.onDidScroll(x => {
 				this._initialScrollProgress = x.scrollYPercentage;
@@ -338,9 +341,6 @@ export class OverlayWebview extends Disposable implements IOverlayWebview {
 	private readonly _onDidClickLink = this._register(new Emitter<string>());
 	public readonly onDidClickLink = this._onDidClickLink.event;
 
-	private readonly _onDidReload = this._register(new Emitter<void>());
-	public readonly onDidReload = this._onDidReload.event;
-
 	private readonly _onDidScroll = this._register(new Emitter<{ readonly scrollYPercentage: number }>());
 	public readonly onDidScroll = this._onDidScroll.event;
 
@@ -359,6 +359,8 @@ export class OverlayWebview extends Disposable implements IOverlayWebview {
 	private readonly _onFatalError = this._register(new Emitter<{ readonly message: string }>());
 	public onFatalError = this._onFatalError.event;
 
+	public readonly intrinsicContentSize = observableValue<{ readonly width: number; readonly height: number } | undefined>('WebviewIntrinsicContentSize', undefined);
+
 	public async postMessage(message: any, transfer?: readonly ArrayBuffer[]): Promise<boolean> {
 		if (this._webview.value) {
 			return this._webview.value.postMessage(message, transfer);

src/vs/workbench/contrib/webview/browser/pre/index.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 
 	<meta http-equiv="Content-Security-Policy"
-		content="default-src 'none'; script-src 'sha256-l9e7E37hgQqoIAqcFRgQ5/0NqMMW93mQmYAsUcDUyZ4=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
+		content="default-src 'none'; script-src 'sha256-kvB8+4EUtyEDThMIgb61H4fMe04EqjRhttNuYd028mo=' 'self'; frame-src 'self'; style-src 'unsafe-inline';">
 
 	<!-- Disable pinch zooming -->
 	<meta name="viewport"
@@ -1122,6 +1122,21 @@
 							contentWindow.focus();
 						}
 
+						// Get body size
+						const docEl = contentDocument.documentElement;
+						if (docEl) {
+							const postSize = () => {
+								hostMessaging.postMessage('updated-intrinsic-content-size', {
+									width: docEl.scrollWidth,
+									height: docEl.scrollHeight
+								});
+							};
+
+							const resizeObserver = new ResizeObserver(postSize);
+							resizeObserver.observe(docEl);
+							postSize();
+						}
+
 						pendingMessages.forEach((message) => {
 							contentWindow.postMessage(message.message, window.origin, message.transfer);
 						});

src/vs/workbench/contrib/webview/browser/webview.ts

@@ -9,6 +9,7 @@ import { CodeWindow } from '../../../../base/browser/window.js';
 import { equals } from '../../../../base/common/arrays.js';
 import { Event } from '../../../../base/common/event.js';
 import { IDisposable } from '../../../../base/common/lifecycle.js';
+import { IObservable } from '../../../../base/common/observable.js';
 import { isEqual } from '../../../../base/common/resources.js';
 import { URI } from '../../../../base/common/uri.js';
 import { generateUuid } from '../../../../base/common/uuid.js';
@@ -233,7 +234,13 @@ export interface IWebview extends IDisposable {
 	readonly onDidWheel: Event<IMouseWheelEvent>;
 
 	readonly onDidUpdateState: Event<string | undefined>;
-	readonly onDidReload: Event<void>;
+
+	/**
+	 * The natural size of the content inside the webview.
+	 *
+	 * This is computed by looking at the size of the webview's the document element.
+	 */
+	readonly intrinsicContentSize: IObservable<{ readonly width: number; readonly height: number } | undefined>;
 
 	/**
 	 * Fired when the webview cannot be loaded or is now in a non-functional state.

src/vs/workbench/contrib/webview/browser/webviewElement.ts

@@ -14,6 +14,7 @@ import { CancellationTokenSource } from '../../../../base/common/cancellation.js
 import { Emitter, Event } from '../../../../base/common/event.js';
 import { Disposable, IDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
 import { COI } from '../../../../base/common/network.js';
+import { observableValue } from '../../../../base/common/observable.js';
 import { URI } from '../../../../base/common/uri.js';
 import { generateUuid } from '../../../../base/common/uuid.js';
 import { localize } from '../../../../nls.js';
@@ -141,6 +142,8 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 	protected readonly _webviewFindWidget: WebviewFindWidget | undefined;
 	public readonly checkImeCompletionState = true;
 
+	public readonly intrinsicContentSize = observableValue<{ readonly width: number; readonly height: number } | undefined>('WebviewIntrinsicContentSize', undefined);
+
 	private _disposed = false;
 
 
@@ -312,6 +315,10 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 			this.handleDragEvent('drag', event);
 		}));
 
+		this._register(this.on('updated-intrinsic-content-size', (event) => {
+			this.intrinsicContentSize.set({ width: event.width, height: event.height }, undefined, undefined);
+		}));
+
 		if (initInfo.options.enableFindWidget) {
 			this._webviewFindWidget = this._register(instantiationService.createInstance(WebviewFindWidget, this));
 		}
@@ -349,9 +356,6 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 	private readonly _onDidClickLink = this._register(new Emitter<string>());
 	public readonly onDidClickLink = this._onDidClickLink.event;
 
-	private readonly _onDidReload = this._register(new Emitter<void>());
-	public readonly onDidReload = this._onDidReload.event;
-
 	private readonly _onMessage = this._register(new Emitter<WebviewMessageReceivedEvent>());
 	public readonly onMessage = this._onMessage.event;
 
@@ -590,11 +594,6 @@ export class WebviewElement extends Disposable implements IWebview, WebviewFindD
 
 	public reload(): void {
 		this.doUpdateContent(this._content);
-
-		const subscription = this._register(this.on('did-load', () => {
-			this._onDidReload.fire();
-			subscription.dispose();
-		}));
 	}
 
 	public setHtml(html: string) {

src/vs/workbench/contrib/webview/browser/webviewMessages.d.ts

@@ -40,7 +40,8 @@ export type FromWebviewMessage = {
 	'did-keyup': KeyEvent;
 	'did-context-menu': { clientX: number; clientY: number; context: { [key: string]: unknown } };
 	'drag-start': void;
-	'drag': WebViewDragEvent
+	'drag': WebViewDragEvent;
+	'updated-intrinsic-content-size': { width: number; height: number };
 };
 
 interface UpdateContentEvent {