Reuse webviews in walkthrough steps instead of creating them each time. (microsoft#186267)

Reuse webviews

Author: bhavyaus

src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts

@@ -42,7 +42,7 @@ import { ILink, LinkedText } from 'vs/base/common/linkedText';
 import { Button } from 'vs/base/browser/ui/button/button';
 import { Link } from 'vs/platform/opener/browser/link';
 import { renderFormattedText } from 'vs/base/browser/formattedTextRenderer';
-import { IWebviewService } from 'vs/workbench/contrib/webview/browser/webview';
+import { IWebviewElement, IWebviewService } from 'vs/workbench/contrib/webview/browser/webview';
 import { ILanguageService } from 'vs/editor/common/languages/language';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
 import { generateUuid } from 'vs/base/common/uuid';
@@ -128,6 +128,7 @@ export class GettingStartedPage extends EditorPane {
 	private dispatchListeners: DisposableStore = new DisposableStore();
 	private stepDisposables: DisposableStore = new DisposableStore();
 	private detailsPageDisposables: DisposableStore = new DisposableStore();
+	private mediaDisposables: DisposableStore = new DisposableStore();
 
 	// Ensure that the these are initialized before use.
 	// Currently initialized before use in buildCategoriesSlide and scrollToCategory
@@ -158,6 +159,7 @@ export class GettingStartedPage extends EditorPane {
 	private categoriesSlide!: HTMLElement;
 	private stepsContent!: HTMLElement;
 	private stepMediaComponent!: HTMLElement;
+	private webview!: IWebviewElement;
 
 	private layoutMarkdown: (() => void) | undefined;
 
@@ -494,6 +496,7 @@ export class GettingStartedPage extends EditorPane {
 	}
 
 	private currentMediaComponent: string | undefined = undefined;
+	private currentMediaType: string | undefined = undefined;
 	private async buildMediaComponent(stepId: string) {
 		if (!this.currentWalkthrough) {
 			throw Error('no walkthrough selected');
@@ -507,11 +510,29 @@ export class GettingStartedPage extends EditorPane {
 
 		this.stepDisposables.add({
 			dispose: () => {
-				clearNode(this.stepMediaComponent);
 				this.currentMediaComponent = undefined;
 			}
 		});
 
+		if (this.currentMediaType !== stepToExpand.media.type) {
+
+			this.currentMediaType = stepToExpand.media.type;
+
+			this.mediaDisposables.add(toDisposable(() => {
+				this.currentMediaType = undefined;
+			}));
+
+			clearNode(this.stepMediaComponent);
+
+			if (stepToExpand.media.type === 'svg') {
+				this.webview = this.mediaDisposables.add(this.webviewService.createWebviewElement({ title: undefined, options: { disableServiceWorker: true }, contentOptions: {}, extension: undefined }));
+				this.webview.mountTo(this.stepMediaComponent);
+			} else if (stepToExpand.media.type === 'markdown') {
+				this.webview = this.mediaDisposables.add(this.webviewService.createWebviewElement({ options: {}, contentOptions: { localResourceRoots: [stepToExpand.media.root], allowScripts: true }, title: '', extension: undefined }));
+				this.webview.mountTo(this.stepMediaComponent);
+			}
+		}
+
 		if (stepToExpand.media.type === 'image') {
 
 			this.stepsContent.classList.add('image');
@@ -542,10 +563,7 @@ export class GettingStartedPage extends EditorPane {
 			this.stepsContent.classList.remove('markdown');
 
 			const media = stepToExpand.media;
-			const webview = this.stepDisposables.add(this.webviewService.createWebviewElement({ title: undefined, options: {}, contentOptions: {}, extension: undefined }));
-			webview.mountTo(this.stepMediaComponent);
-
-			webview.setHtml(await this.detailsRenderer.renderSVG(media.path));
+			this.webview.setHtml(await this.detailsRenderer.renderSVG(media.path));
 
 			let isDisposed = false;
 			this.stepDisposables.add(toDisposable(() => { isDisposed = true; }));
@@ -554,7 +572,7 @@ export class GettingStartedPage extends EditorPane {
 				// Render again since color vars change
 				const body = await this.detailsRenderer.renderSVG(media.path);
 				if (!isDisposed) { // Make sure we weren't disposed of in the meantime
-					webview.setHtml(body);
+					this.webview.setHtml(body);
 				}
 			}));
 
@@ -569,7 +587,7 @@ export class GettingStartedPage extends EditorPane {
 				}
 			}));
 
-			this.stepDisposables.add(webview.onDidClickLink(link => {
+			this.stepDisposables.add(this.webview.onDidClickLink(link => {
 				if (matchesScheme(link, Schemas.https) || matchesScheme(link, Schemas.http) || (matchesScheme(link, Schemas.command))) {
 					this.openerService.open(link, { allowCommands: true });
 				}
@@ -583,11 +601,8 @@ export class GettingStartedPage extends EditorPane {
 
 			const media = stepToExpand.media;
 
-			const webview = this.stepDisposables.add(this.webviewService.createWebviewElement({ options: {}, contentOptions: { localResourceRoots: [media.root], allowScripts: true }, title: '', extension: undefined }));
-			webview.mountTo(this.stepMediaComponent);
-
 			const rawHTML = await this.detailsRenderer.renderMarkdown(media.path, media.base);
-			webview.setHtml(rawHTML);
+			this.webview.setHtml(rawHTML);
 
 			const serializedContextKeyExprs = rawHTML.match(/checked-on=\"([^'][^"]*)\"/g)?.map(attr => attr.slice('checked-on="'.length, -1)
 				.replace(/'/g, '\'')
@@ -596,7 +611,7 @@ export class GettingStartedPage extends EditorPane {
 			const postTrueKeysMessage = () => {
 				const enabledContextKeys = serializedContextKeyExprs?.filter(expr => this.contextService.contextMatchesRules(ContextKeyExpr.deserialize(expr)));
 				if (enabledContextKeys) {
-					webview.postMessage({
+					this.webview.postMessage({
 						enabledContextKeys
 					});
 				}
@@ -614,7 +629,7 @@ export class GettingStartedPage extends EditorPane {
 			let isDisposed = false;
 			this.stepDisposables.add(toDisposable(() => { isDisposed = true; }));
 
-			this.stepDisposables.add(webview.onDidClickLink(link => {
+			this.stepDisposables.add(this.webview.onDidClickLink(link => {
 				if (matchesScheme(link, Schemas.https) || matchesScheme(link, Schemas.http) || (matchesScheme(link, Schemas.command))) {
 					this.openerService.open(link, { allowCommands: true });
 				}
@@ -625,7 +640,7 @@ export class GettingStartedPage extends EditorPane {
 				this.stepDisposables.add(this.themeService.onDidColorThemeChange(async () => {
 					const body = await this.detailsRenderer.renderMarkdown(media.path, media.base);
 					if (!isDisposed) { // Make sure we weren't disposed of in the meantime
-						webview.setHtml(body);
+						this.webview.setHtml(body);
 						postTrueKeysMessage();
 					}
 				}));
@@ -635,7 +650,7 @@ export class GettingStartedPage extends EditorPane {
 
 			this.layoutMarkdown = () => {
 				layoutDelayer.trigger(() => {
-					webview.postMessage({ layoutMeNow: true });
+					this.webview.postMessage({ layoutMeNow: true });
 				});
 			};
 
@@ -644,16 +659,13 @@ export class GettingStartedPage extends EditorPane {
 
 			postTrueKeysMessage();
 
-			this.stepDisposables.add(webview.onMessage(e => {
+			this.stepDisposables.add(this.webview.onMessage(e => {
 				const message: string = e.message as string;
 				if (message.startsWith('command:')) {
 					this.openerService.open(message, { allowCommands: true });
 				} else if (message.startsWith('setTheme:')) {
 					this.configurationService.updateValue(ThemeSettings.COLOR_THEME, message.slice('setTheme:'.length), ConfigurationTarget.USER);
-				} else if (message === 'unloaded') {
-					this.buildMediaComponent(stepId);
-				}
-				else {
+				} else {
 					console.error('Unexpected message', message);
 				}
 			}));
@@ -1139,6 +1151,12 @@ export class GettingStartedPage extends EditorPane {
 		this.featuredExtensionsList?.layout(size);
 		this.recentlyOpenedList?.layout(size);
 
+		if (this.editorInput.selectedStep && this.currentMediaType) {
+			this.mediaDisposables.clear();
+			this.stepDisposables.clear();
+			this.buildMediaComponent(this.editorInput.selectedStep);
+		}
+
 		this.layoutMarkdown?.();
 
 		this.container.classList.toggle('height-constrained', size.height <= 600);
@@ -1352,6 +1370,7 @@ export class GettingStartedPage extends EditorPane {
 		});
 
 		this.detailsPageDisposables.clear();
+		this.mediaDisposables.clear();
 
 		const category = this.gettingStartedCategories.find(category => category.id === categoryID);
 		if (!category) {

src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts

@@ -126,10 +126,6 @@ export class GettingStartedDetailsRenderer {
 			<script nonce="${nonce}">
 				const vscode = acquireVsCodeApi();
 
-				window.addEventListener('unload', event => {
-					vscode.postMessage('unloaded');
-				});
-
 				document.querySelectorAll('[when-checked]').forEach(el => {
 					el.addEventListener('click', () => {
 						vscode.postMessage(el.getAttribute('when-checked'));