Improves loading performance of webviews

2 年前 · 712990658b
--- a/src/webviews/apps/home/home.html
+++ b/src/webviews/apps/home/home.html
@ -2,12 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</head>

 	<body class="preload">
@ -16,8 +10,13 @@
 			<vscode-divider></vscode-divider>
 			<div id="slot2"></div>
 		</div>
 		<script type="module" src="#{webroot}/toolkit.min.js"></script>
 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</body>

 	<template id="welcome">
--- a/src/webviews/apps/home/home.ts
+++ b/src/webviews/apps/home/home.ts
@ -1,5 +1,6 @@
 /*global window*/
 import './home.scss';
 import { provideVSCodeDesignSystem, vsCodeButton, vsCodeDivider } from '@vscode/webview-ui-toolkit';
 import { Disposable } from 'vscode';
 import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../subscription';
 import { DidChangeSubscriptionNotificationType, State } from '../../home/protocol';
@ -17,6 +18,13 @@ export class HomeApp extends App {
 	}

 	protected override onInitialize() {
 		provideVSCodeDesignSystem().register({
 			register: function (container: any, context: any) {
 				vsCodeButton().register(container, context);
 				vsCodeDivider().register(container, context);
 			},
 		});

 		this.$slot1 = document.getElementById('slot1') as HTMLDivElement;
 		this.$slot2 = document.getElementById('slot2') as HTMLDivElement;

--- a/src/webviews/apps/rebase/rebase.html
+++ b/src/webviews/apps/rebase/rebase.html
@ -2,12 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</head>

 	<body class="preload">
@ -46,5 +40,11 @@
 			</div>
 		</div>
 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</body>
 </html>
--- a/src/webviews/apps/settings/partials/blame.html
+++ b/src/webviews/apps/settings/partials/blame.html
@ -186,41 +186,49 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/blame.webp"
 					data-visibility="blame.compact =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight.webp"
 					data-visibility="blame.compact =false &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/blame-compact.webp"
 					data-visibility="blame.compact"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-compact-highlight.webp"
 					data-visibility="blame.compact &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight-gutter.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight-scrollbar.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-heatmap-left.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-heatmap-right.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/changes.html
+++ b/src/webviews/apps/settings/partials/changes.html
@ -85,16 +85,18 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/changes.webp" />
 				<img class="image__preview" src="#{webroot}/media/changes.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/changes-highlight-gutter.webp"
 					data-visibility="changes.locations +gutter"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/changes-highlight-scrollbar.webp"
 					data-visibility="changes.locations +overview"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/code-lens.html
+++ b/src/webviews/apps/settings/partials/code-lens.html
@ -252,53 +252,62 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/code-lens.webp" />
 				<img class="image__preview" src="#{webroot}/media/code-lens.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 					loading="lazy"
 				/>

 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-containers-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-containers-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-containers-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 					loading="lazy"
 				/>

 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-blocks-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-blocks-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-blocks-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/current-line.html
+++ b/src/webviews/apps/settings/partials/current-line.html
@ -116,21 +116,24 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" />
 				<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on-scrollable.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/heatmap.html
+++ b/src/webviews/apps/settings/partials/heatmap.html
@ -105,16 +105,18 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/heatmap.webp" />
 				<img class="image__preview" src="#{webroot}/media/heatmap.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/heatmap-gutter.webp"
 					data-visibility="heatmap.locations +gutter"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/heatmap-scrollbar.webp"
 					data-visibility="heatmap.locations +overview"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/hovers.html
+++ b/src/webviews/apps/settings/partials/hovers.html
@ -152,41 +152,48 @@
 			</div>

 			<div class="section__preview" data-visibility="hovers.enabled">
 				<img class="image__preview" src="#{webroot}/media/hovers-currentLine.webp" />
 				<img class="image__preview" src="#{webroot}/media/hovers-currentLine.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-currentLine-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-currentLine-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
 					loading="lazy"
 				/>
 			</div>
 		</div>
@ -261,41 +268,49 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/hovers-annotations.webp"
 					data-visibility="blame.compact =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/hovers-annotations-compact.webp"
 					data-visibility="blame.compact"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-annotations-currentLine-on.webp"
 					data-visibility="currentLine.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/modes.html
+++ b/src/webviews/apps/settings/partials/modes.html
@ -65,16 +65,18 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/status-bar.webp" />
 				<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/modes-status-bar-left.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =left"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/modes-status-bar-right.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =right"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/rebase-editor.html
+++ b/src/webviews/apps/settings/partials/rebase-editor.html
@ -32,6 +32,7 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/rebase-editor.webp"
 					data-visibility="rebaseEditor.enabled"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/status-bar.html
+++ b/src/webviews/apps/settings/partials/status-bar.html
@ -149,26 +149,30 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/status-bar.webp" />
 				<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-right+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-right.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-left+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-left.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.branches.html
+++ b/src/webviews/apps/settings/partials/views.branches.html
@ -176,31 +176,37 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-compare+pr.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-pr.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.commits.html
+++ b/src/webviews/apps/settings/partials/views.commits.html
@ -210,102 +210,122 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare+pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>

 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare+pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits = false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false "
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.contributors.html
+++ b/src/webviews/apps/settings/partials/views.contributors.html
@ -142,7 +142,7 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/contributors-view.webp" />
 				<img class="image__preview" src="#{webroot}/media/contributors-view.webp" loading="lazy" />
 			</div>
 		</div>

--- a/src/webviews/apps/settings/partials/views.file-history.html
+++ b/src/webviews/apps/settings/partials/views.file-history.html
@ -78,11 +78,12 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/file-history-view.webp" />
 				<img class="image__preview" src="#{webroot}/media/file-history-view.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/file-history-view-avatars.webp"
 					data-visibility="views.fileHistory.avatars"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.line-history.html
+++ b/src/webviews/apps/settings/partials/views.line-history.html
@ -43,11 +43,12 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/line-history-view.webp" />
 				<img class="image__preview" src="#{webroot}/media/line-history-view.webp" loading="lazy" />
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/line-history-view-avatars.webp"
 					data-visibility="views.lineHistory.avatars"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.remotes.html
+++ b/src/webviews/apps/settings/partials/views.remotes.html
@ -157,16 +157,19 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/remotes-view-pr.webp"
 					data-visibility="views.remotes.pullRequests.enabled &amp; views.remotes.pullRequests.showForBranches"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled &amp; views.remotes.pullRequests.showForBranches =false"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.repositories.html
+++ b/src/webviews/apps/settings/partials/views.repositories.html
@ -362,7 +362,7 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/repositories-view.webp" />
 				<img class="image__preview" src="#{webroot}/media/repositories-view.webp" loading="lazy" />
 			</div>
 		</div>

--- a/src/webviews/apps/settings/partials/views.searchAndCompare.html
+++ b/src/webviews/apps/settings/partials/views.searchAndCompare.html
@ -113,7 +113,7 @@
 			</div>

 			<div class="section__preview">
 				<img class="image__preview" src="#{webroot}/media/search-and-compare-view.webp" />
 				<img class="image__preview" src="#{webroot}/media/search-and-compare-view.webp" loading="lazy" />
 			</div>
 		</div>

--- a/src/webviews/apps/settings/partials/views.stashes.html
+++ b/src/webviews/apps/settings/partials/views.stashes.html
@ -116,11 +116,13 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/stashes-view-auto.webp"
 					data-visibility="views.stashes.files.layout !tree"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/stashes-view-tree.webp"
 					data-visibility="views.stashes.files.layout =tree"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.tags.html
+++ b/src/webviews/apps/settings/partials/views.tags.html
@ -89,11 +89,13 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/tags-view-list.webp"
 					data-visibility="views.tags.branches.layout !tree"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/tags-view-tree.webp"
 					data-visibility="views.tags.branches.layout =tree"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/partials/views.worktrees.html
+++ b/src/webviews/apps/settings/partials/views.worktrees.html
@ -175,31 +175,37 @@
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-compare+pr.webp"
 					data-visibility="views.worktrees.showBranchComparison !false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-compare.webp"
 					data-visibility="views.worktrees.showBranchComparison !false &amp; views.worktrees.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-compare.webp"
 					data-visibility="views.worktrees.showBranchComparison !false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-pr.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled =false"
 					loading="lazy"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches =false"
 					loading="lazy"
 				/>
 			</div>
 		</div>
--- a/src/webviews/apps/settings/settings.html
+++ b/src/webviews/apps/settings/settings.html
@ -2,159 +2,8 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</head>

 	<template id="token-popup">
 		<h3 class="token-popup__title">Available Tokens</h3>
 		<div class="token-popup__scroller">
 			<table class="token-popup__table">
 				<tbody>
 					<tr>
 						<td>Commit SHA</td>
 						<td><span class="token" data-token="id">id</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author</td>
 						<td><span class="token" data-token="author">author</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author (except you)</td>
 						<td><span class="token" data-token="authorNotYou">authorNotYou</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author E-mail</td>
 						<td><span class="token" data-token="email">email</span></td>
 					</tr>
 					<tr>
 						<td>Commit Message</td>
 						<td><span class="token" data-token="message">message</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Relative, e.g. 1 day ago<br />Committed vs Authored based on setting</i
 							>
 						</td>
 						<td><span class="token" data-token="ago">ago</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Absolute, e.g. August 8th, 2016 10:48am<br />Committed vs Authored based on setting</i
 							>
 						</td>
 						<td><span class="token" data-token="date">date</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Relative or absolute based on date setting<br />Committed vs Authored based on
 								setting</i
 							>
 						</td>
 						<td><span class="token" data-token="agoOrDate">agoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date (Short)<br /><i
 								>Short relative or absolute based on date setting<br />Committed vs Authored based on
 								setting</i
 							>
 						</td>
 						<td><span class="token" data-token="agoOrDateShort">agoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Relative date</i></td>
 						<td><span class="token" data-token="authorAgo">authorAgo</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Absolute, e.g. August 8th, 2016 10:48am</i></td>
 						<td><span class="token" data-token="authorDate">authorDate</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="authorAgoOrDate">authorAgoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date (Short)<br /><i>Short relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="authorAgoOrDateShort">authorAgoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Relative date</i></td>
 						<td><span class="token" data-token="committerAgo">committerAgo</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Absolute, e.g. August 8th, 2016 10:48am</i></td>
 						<td><span class="token" data-token="committerDate">committerDate</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="committerAgoOrDate">committerAgoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date (Short)<br /><i>Short relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="committerAgoOrDateShort">committerAgoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Branch & Tag Tips<br /><i>Indicates if the commit is a tip of any branches or tags</i></td>
 						<td><span class="token" data-token="tips">tips</span></td>
 					</tr>
 					<tr>
 						<td>
 							Changes Indicator<br /><i
 								>Indicates adds, changes, renames, and deletes<br />e.g +1 ~3 -0</i
 							>
 						</td>
 						<td><span class="token" data-token="changes">changes</span></td>
 					</tr>
 					<tr>
 						<td>
 							Changes Indicator (short)<br /><i
 								>Indicates adds, changes, renames, and deletes<br />e.g +1~3</i
 							>
 						</td>
 						<td><span class="token" data-token="changesShort">changesShort</span></td>
 					</tr>
 					<tr>
 						<td>Pull Request<br /><i>Pull request (if any) that introduced the commit</i></td>
 						<td><span class="token" data-token="pullRequest">pullRequest</span></td>
 					</tr>
 					<tr>
 						<td>
 							Pull Request State<br /><i
 								>State (open, merged, closed) of the pull request (if any) that introduced the commit</i
 							>
 						</td>
 						<td><span class="token" data-token="pullRequestState">pullRequestState</span></td>
 					</tr>
 					<!-- <tr>
 						<td>Author Avatar</td>
 						<td><span class="token" data-token="avatar">avatar</span></td>
 					</tr> -->
 					<!-- <tr>
 						<td>
 							Commands<br /><i>Set of commit command buttons<br />only valid in hovers</i>
 						</td>
 						<td><span class="token" data-token="commands">commands</span></td>
 					</tr> -->
 				</tbody>
 			</table>
 		</div>
 		<span class="token-popup__hint">
 			<i class="icon icon__info"></i>
 			<a href="https://github.com/eamodio/vscode-gitlens/wiki/Custom-Formatting" title="Open formatting docs"
 				>Learn more</a
 			>
 			about formatting options
 		</span>
 	</template>

 	<body class="preload">
 		<!-- <canvas class="snow"></canvas>
 		<img
@ -494,5 +343,156 @@
 		</div>

 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</body>

 	<template id="token-popup">
 		<h3 class="token-popup__title">Available Tokens</h3>
 		<div class="token-popup__scroller">
 			<table class="token-popup__table">
 				<tbody>
 					<tr>
 						<td>Commit SHA</td>
 						<td><span class="token" data-token="id">id</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author</td>
 						<td><span class="token" data-token="author">author</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author (except you)</td>
 						<td><span class="token" data-token="authorNotYou">authorNotYou</span></td>
 					</tr>
 					<tr>
 						<td>Commit Author E-mail</td>
 						<td><span class="token" data-token="email">email</span></td>
 					</tr>
 					<tr>
 						<td>Commit Message</td>
 						<td><span class="token" data-token="message">message</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Relative, e.g. 1 day ago<br />Committed vs Authored based on setting</i
 							>
 						</td>
 						<td><span class="token" data-token="ago">ago</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Absolute, e.g. August 8th, 2016 10:48am<br />Committed vs Authored based on setting</i
 							>
 						</td>
 						<td><span class="token" data-token="date">date</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date<br /><i
 								>Relative or absolute based on date setting<br />Committed vs Authored based on
 								setting</i
 							>
 						</td>
 						<td><span class="token" data-token="agoOrDate">agoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>
 							Commit or Authored Date (Short)<br /><i
 								>Short relative or absolute based on date setting<br />Committed vs Authored based on
 								setting</i
 							>
 						</td>
 						<td><span class="token" data-token="agoOrDateShort">agoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Relative date</i></td>
 						<td><span class="token" data-token="authorAgo">authorAgo</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Absolute, e.g. August 8th, 2016 10:48am</i></td>
 						<td><span class="token" data-token="authorDate">authorDate</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date<br /><i>Relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="authorAgoOrDate">authorAgoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>Authored Date (Short)<br /><i>Short relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="authorAgoOrDateShort">authorAgoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Relative date</i></td>
 						<td><span class="token" data-token="committerAgo">committerAgo</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Absolute, e.g. August 8th, 2016 10:48am</i></td>
 						<td><span class="token" data-token="committerDate">committerDate</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date<br /><i>Relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="committerAgoOrDate">committerAgoOrDate</span></td>
 					</tr>
 					<tr>
 						<td>Commit Date (Short)<br /><i>Short relative or absolute date based on date setting</i></td>
 						<td><span class="token" data-token="committerAgoOrDateShort">committerAgoOrDateShort</span></td>
 					</tr>
 					<tr>
 						<td>Branch & Tag Tips<br /><i>Indicates if the commit is a tip of any branches or tags</i></td>
 						<td><span class="token" data-token="tips">tips</span></td>
 					</tr>
 					<tr>
 						<td>
 							Changes Indicator<br /><i
 								>Indicates adds, changes, renames, and deletes<br />e.g +1 ~3 -0</i
 							>
 						</td>
 						<td><span class="token" data-token="changes">changes</span></td>
 					</tr>
 					<tr>
 						<td>
 							Changes Indicator (short)<br /><i
 								>Indicates adds, changes, renames, and deletes<br />e.g +1~3</i
 							>
 						</td>
 						<td><span class="token" data-token="changesShort">changesShort</span></td>
 					</tr>
 					<tr>
 						<td>Pull Request<br /><i>Pull request (if any) that introduced the commit</i></td>
 						<td><span class="token" data-token="pullRequest">pullRequest</span></td>
 					</tr>
 					<tr>
 						<td>
 							Pull Request State<br /><i
 								>State (open, merged, closed) of the pull request (if any) that introduced the commit</i
 							>
 						</td>
 						<td><span class="token" data-token="pullRequestState">pullRequestState</span></td>
 					</tr>
 					<!-- <tr>
 						<td>Author Avatar</td>
 						<td><span class="token" data-token="avatar">avatar</span></td>
 					</tr> -->
 					<!-- <tr>
 						<td>
 							Commands<br /><i>Set of commit command buttons<br />only valid in hovers</i>
 						</td>
 						<td><span class="token" data-token="commands">commands</span></td>
 					</tr> -->
 				</tbody>
 			</table>
 		</div>
 		<span class="token-popup__hint">
 			<i class="icon icon__info"></i>
 			<a href="https://github.com/eamodio/vscode-gitlens/wiki/Custom-Formatting" title="Open formatting docs"
 				>Learn more</a
 			>
 			about formatting options
 		</span>
 	</template>
 </html>
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@ -2,12 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</head>

 	<body class="preload">
@ -89,21 +83,24 @@
 						</div>
 					</div>
 					<div class="section__preview">
 						<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" />
 						<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" loading="lazy" />
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on.webp"
 							data-visibility="currentLine.enabled"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on+pr.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on-scrollable.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 							loading="lazy"
 						/>
 					</div>
 				</section>
@ -128,53 +125,62 @@
 						</div>
 					</div>
 					<div class="section__preview">
 						<img class="image__preview" src="#{webroot}/media/code-lens.webp" />
 						<img class="image__preview" src="#{webroot}/media/code-lens.webp" loading="lazy" />
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 							loading="lazy"
 						/>

 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-containers-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-containers-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-containers-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 							loading="lazy"
 						/>

 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-blocks-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-blocks-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-blocks-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 							loading="lazy"
 						/>
 					</div>
 				</section>
@ -199,16 +205,18 @@
 						</div>
 					</div>
 					<div class="section__preview">
 						<img class="image__preview" src="#{webroot}/media/status-bar.webp" />
 						<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/status-bar-left.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =left"
 							loading="lazy"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/status-bar-right.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =right"
 							loading="lazy"
 						/>
 					</div>
 				</section>
@ -394,5 +402,11 @@
 			</div>
 		</div>
 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			@font-face {
 				font-family: 'codicon';
 				src: url('#{webroot}/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype');
 			}
 		</style>
 	</body>
 </html>
--- a/webpack.config.js
+++ b/webpack.config.js
@ -280,17 +280,6 @@ function getWebviewsConfig(mode, env) {
 					),
 					to: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'webviews'),
 				},
 				{
 					from: path.posix.join(
 						__dirname.replace(/\\/g, '/'),
 						'node_modules',
 						'@vscode',
 						'webview-ui-toolkit',
 						'dist',
 						'toolkit.min.js',
 					),
 					to: path.posix.join(__dirname.replace(/\\/g, '/'), 'dist', 'webviews'),
 				},
 			],
 		}),
 	];
@ -522,6 +511,7 @@ function getHtmlPlugin(name, premium, mode, env) {
 		chunks: [name],
 		filename: path.join(__dirname, 'dist', 'webviews', `${name}.html`),
 		inject: true,
 		scriptLoading: 'module',
 		inlineSource: mode === 'production' ? '.css$' : undefined,
 		minify:
 			mode === 'production'
@ -577,10 +567,10 @@ class InlineChunkHtmlPlugin {

 		compiler.hooks.compilation.tap('InlineChunkHtmlPlugin', compilation => {
 			const getInlinedTagFn = tag => this.getInlinedTag(publicPath, compilation.assets, tag);

 			const sortFn = (a, b) => (a.tagName === 'script' ? 1 : -1) - (b.tagName === 'script' ? 1 : -1);
 			this.htmlPlugin.getHooks(compilation).alterAssetTagGroups.tap('InlineChunkHtmlPlugin', assets => {
 				assets.headTags = assets.headTags.map(getInlinedTagFn);
 				assets.bodyTags = assets.bodyTags.map(getInlinedTagFn);
 				assets.headTags = assets.headTags.map(getInlinedTagFn).sort(sortFn);
 				assets.bodyTags = assets.bodyTags.map(getInlinedTagFn).sort(sortFn);
 			});
 		});
 	}