Custom Webview in explorer view placed at wrong position

Does this issue occur when all extensions are disabled?: Yes/No

• VS Code Version: 1.59.0
• OS Version: macOs 11.4

Steps to Reproduce:

1. Install the “asm-code-lens” extension from market place (v1.8.1). It will add a custom view to the explorer view.
2. Load some project, e.g. a type script project, but it should not matter what.
3. Got to explorer view
4. You should see the “HEXADECIMAL CALCULATOR” pane there.
5. Make sure there is some other pane below and expand it
6. Expand the “HEXADECIMAL CALCULATOR” pane. You will see the calculator contents.
7. Now expand the pane above the “HEXADECIMAL CALCULATOR”
8. This makes the “HEXADECIMAL CALCULATOR” pane to be moved down

Result: The contents of the “HEXADECIMAL CALCULATOR” pane is not moved. It stays in the same position, i.e. it is now overlapping the pane above the “HEXADECIMAL CALCULATOR”.

I have a screen cast which shows the behavior:

I also noticed that everything goes fine if the pane below the “HEXADECIMAL CALCULATOR” is not expanded. See here:

[a-stewart]

Hi,

I have noticed the same issue:

As far as I can see, is caused by the fact the webview is a child or the main element, not of the viewpane element. When the view pane position is updated layoutWebviewOverElement() in dynamicWebviewEditorOverlay.ts to move the webview to the same position as the view pane.

However, the view pane is now animated, and the layoutWebviewOverElement is called instantly, which means the webview positition is set to where the view pane starts the animation, not where it finishes the animation.

For a really basic hack, you can update the layoutWebviewOverElement method to something like this:

	public layoutWebviewOverElement(element: HTMLElement, dimension?: Dimension, animated = true) {
		if (!this.container || !this.container.parentElement) {
			return;
		}

		const frameRect = element.getBoundingClientRect();
		const containerRect = this.container.parentElement.getBoundingClientRect();
		const parentBorderTop = (containerRect.height - this.container.parentElement.clientHeight) / 2.0;
		const parentBorderLeft = (containerRect.width - this.container.parentElement.clientWidth) / 2.0;
		this.container.style.position = 'absolute';
		this.container.style.overflow = 'hidden';
		this.container.style.top = `${frameRect.top - containerRect.top - parentBorderTop}px`;
		this.container.style.left = `${frameRect.left - containerRect.left - parentBorderLeft}px`;
		this.container.style.width = `${dimension ? dimension.width : frameRect.width}px`;
		this.container.style.height = `${dimension ? dimension.height : frameRect.height}px`;

		// Hack, there is an animation that lasts about 200ms, update the webview position afterwards.
		if (animated) {
			setTimeout(() => {
				this.layoutWebviewOverElement(element, dimension, false);
			}, 200);
		}
	}

I think a better solution, though, may be to either anchor the webview to the view pane element so that it animates with it. Or to give the webview the details of the animation so that it can also animate in the same way.

[tamuratak]

Duplicate of #110450