From 668315e25e29cbdc9a80754fd88cf07e0722af8c Mon Sep 17 00:00:00 2001 From: Matt Bierner Date: Tue, 11 Apr 2017 11:07:02 -0700 Subject: [PATCH] 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 --- .../extensions/browser/extensionEditor.ts | 3 +++ .../parts/html/browser/htmlPreviewPart.ts | 4 ++- .../workbench/parts/html/browser/webview.html | 2 +- .../workbench/parts/html/browser/webview.ts | 26 +++++++++++++++++-- .../electron-browser/releaseNotesEditor.ts | 4 ++- 5 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/vs/workbench/parts/extensions/browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/browser/extensionEditor.ts index e0ee070c5d8..15c667eda4f 100644 --- 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(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]; diff --git a/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts b/src/vs/workbench/parts/html/browser/htmlPreviewPart.ts index ada78a427cc..46c5cf18a93 100644 --- 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 { diff --git a/src/vs/workbench/parts/html/browser/webview.html b/src/vs/workbench/parts/html/browser/webview.html index 3f13a8ecb9b..04e44c27fd7 100644 --- a/src/vs/workbench/parts/html/browser/webview.html +++ b/src/vs/workbench/parts/html/browser/webview.html @@ -1,5 +1,5 @@ - + Virtual Document diff --git a/src/vs/workbench/parts/html/browser/webview.ts b/src/vs/workbench/parts/html/browser/webview.ts index fc858d2ea19..0d0566fc631 100644 --- 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(); private _onDidLoadContent = new Emitter<{ stats: any }>(); - constructor(parent: HTMLElement, private _styleElement: Element) { + constructor( + private parent: HTMLElement, + private _styleElement: Element + ) { this._webview = 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) + } + }); + }); + } } diff --git a/src/vs/workbench/parts/update/electron-browser/releaseNotesEditor.ts b/src/vs/workbench/parts/update/electron-browser/releaseNotesEditor.ts index d79b1134918..bc585a36381 100644 --- 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 { -- GitLab