Fix webview sizing when zooming (#24465)

Fixes #5745 **Bug** When zooming in or out, webview contents are not properly sized to fill their parent element **Fix** Add a layout method on the webview that manually sets the contents sizes

Fix webview sizing when zooming (#24465)
Fixes #5745 **Bug** When zooming in or out, webview contents are not properly sized to fill their parent element **Fix** Add a layout method on the webview that manually sets the contents sizes
668315e2 · Matt Bierner · GitHub · d4614385 · 668315e2 · 668315e2
5 changed file
--- a/src/vs/workbench/parts/extensions/browser/extensionEditor.ts
+++ b/src/vs/workbench/parts/extensions/browser/extensionEditor.ts
@@ -324,6 +324,9 @@ export class ExtensionEditor extends BaseEditor {
 			.then(renderBody)
 			.then<void>(body => {
 				const webview = new WebView(this.content, this.partService.getContainer(Parts.EDITOR_PART));
+				const removeLayoutParticipant = arrays.insert(this.layoutParticipants, webview);
+				this.contentDisposables.push(toDisposable(removeLayoutParticipant));
+
 				webview.style(this.themeService.getTheme());
 				webview.contents = [body];


--- a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts
+++ b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts
@@ -132,9 +132,11 @@ export class HtmlPreviewPart extends BaseEditor {

 	public layout(dimension: Dimension): void {
 		const {width, height} = dimension;
-		// we take the padding we set on create into account
 		this._container.style.width = `${width}px`;
 		this._container.style.height = `${height}px`;
+		if (this._webview) {
+			this._webview.layout();
+		}
 	}

 	public focus(): void {

--- a/src/vs/workbench/parts/html/browser/webview.html
+++ b/src/vs/workbench/parts/html/browser/webview.html
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="width: 100%; height: 100%">
 <head>
 	<title>Virtual Document</title>
 </head>

--- a/src/vs/workbench/parts/html/browser/webview.ts
+++ b/src/vs/workbench/parts/html/browser/webview.ts
@@ -52,14 +52,16 @@ export default class Webview {
 	private _onDidClickLink = new Emitter<URI>();
 	private _onDidLoadContent = new Emitter<{ stats: any }>();

-	constructor(parent: HTMLElement, private _styleElement: Element) {
+	constructor(
+		private parent: HTMLElement,
+		private _styleElement: Element
+	) {
 		this._webview = <any>document.createElement('webview');

 		this._webview.style.width = '100%';
 		this._webview.style.height = '100%';
 		this._webview.style.outline = '0';
 		this._webview.style.opacity = '0';
-		this._webview.autoSize = 'on';
 		this._webview.contextIsolation = true;

 		// disable auxclick events (see https://developers.google.com/web/updates/2016/10/auxclick)
@@ -99,6 +101,7 @@ export default class Webview {
 					this._webview.style.opacity = '';
 					let [stats] = event.args;
 					this._onDidLoadContent.fire({ stats });
+					this.layout();
 					return;
 				}
 			})
@@ -235,4 +238,23 @@ export default class Webview {

 		this._send('styles', value, activeTheme);
 	}
+
+	public layout(): void {
+		const contents = (this._webview as any).getWebContents();
+		if (!contents) {
+			return;
+		}
+
+		const width = this.parent.clientWidth;
+		const height = this.parent.clientHeight;
+
+		contents.getZoomFactor(factor => {
+			contents.setSize({
+				normal: {
+					width: Math.floor(width * factor),
+					height: Math.floor(height * factor)
+				}
+			});
+		});
+	}
 }
--- a/src/vs/workbench/parts/update/electron-browser/releaseNotesEditor.ts
+++ b/src/vs/workbench/parts/update/electron-browser/releaseNotesEditor.ts
@@ -99,7 +99,9 @@ export class ReleaseNotesEditor extends BaseEditor {
 	}

 	layout(): void {
-		// noop
+		if (this.webview) {
+			this.webview.layout();
+		}
 	}

 	focus(): void {