Fixes #1033 - also switches to ejs templates

package.json

@@ -6194,6 +6194,7 @@
 		"clean-webpack-plugin": "3.0.0",
 		"csp-html-webpack-plugin": "4.0.0",
 		"css-loader": "3.5.3",
+		"ejs-loader": "0.3.6",
 		"eslint": "7.1.0",
 		"eslint-cli": "1.1.1",
 		"eslint-config-prettier": "6.11.0",
@@ -6207,7 +6208,7 @@
 		"prettier": "2.0.5",
 		"sass-loader": "8.0.2",
 		"terser-webpack-plugin": "3.0.1",
-		"ts-loader": "7.0.4",
+		"ts-loader": "7.0.5",
 		"typescript": "3.9.3",
 		"vsce": "1.75.0",
 		"webpack": "4.43.0",

src/webviews/apps/settings/partials/blame.ejs

@@ -0,0 +1,234 @@
+<section id="blame" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>
+			Gutter Blame
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#gutter-blame-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</h2>
+
+		<p class="section__header-hint">
+			Adds on-demand gutter blame annotations for the whole file
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon--md icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<span class="command hidden" data-visibility="blame.toggleMode =file">
+						GitLens: Toggle File Blame Annotations
+					</span>
+					<a
+						class="command hidden"
+						title="Run command"
+						href="command:gitlens.toggleFileBlame"
+						data-visibility="blame.toggleMode =window"
+						>GitLens: Toggle File Blame Annotations</a
+					>
+					command to turn the annotations on or off
+				</p>
+				<p>Press <span class="shortcut-key">Esc</span> to turn off the annotations</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting">
+					<div class="setting__input">
+						<label for="blame.toggleMode">Toggle annotations </label>
+						<select id="blame.toggleMode" name="blame.toggleMode" data-setting>
+							<option value="file">individually for each file</option>
+							<option value="window">for all files</option>
+						</select>
+					</div>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input setting__input--format">
+						<label for="blame.format">Annotation&nbsp;format</label>
+						<input
+							id="blame.format"
+							name="blame.format"
+							type="text"
+							placeholder="&#36;&#123;message|40?&#125; &#36;&#123;agoOrDate|14-&#125;"
+							data-setting
+							data-default-value="&#36;&#123;message|40?&#125; &#36;&#123;agoOrDate|14-&#125;"
+							data-popup-trigger
+						/>
+						<label for="blame.format" title="See available tokens">
+							<i class="icon icon__chevron-down"></i>
+						</label>
+						<div id="blame.format.popup" class="popup hidden"></div>
+					</div>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input">
+						<input id="blame.heatmap.enabled" name="blame.heatmap.enabled" type="checkbox" data-setting />
+						<label for="blame.heatmap.enabled">
+							Add a heatmap (age) indicator to show how recently lines were changed
+						</label>
+					</div>
+					<p class="setting__hint">
+						Indicator color reflects the age of the most recent change (hot or cold), while indicator
+						brightness ranges from bright (newer) to dim (older) based on the relative age
+					</p>
+				</div>
+
+				<div class="settings settings--fixed ml-2">
+					<div class="setting" data-enablement="blame.heatmap.enabled" disabled>
+						<div class="setting__input">
+							<label for="blame.heatmap.location">Position the heatmap on the</label>
+							<select id="blame.heatmap.location" name="blame.heatmap.location" data-setting disabled>
+								<option value="left">left</option>
+								<option value="right">right</option>
+							</select>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input">
+						<input id="blame.avatars" name="blame.avatars" type="checkbox" data-setting />
+						<label for="blame.avatars">Add author avatars in the gutter</label>
+					</div>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input">
+						<input id="blame.compact" name="blame.compact" type="checkbox" data-setting />
+						<label for="blame.compact">Use compact view</label>
+					</div>
+					<p class="setting__hint">
+						Compacts (deduplicates) matching adjacent blame annotations
+					</p>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input">
+						<input
+							id="blame.highlight.enabled"
+							name="blame.highlight.enabled"
+							type="checkbox"
+							data-setting
+						/>
+						<label for="blame.highlight.enabled">
+							Highlight other lines changed by the same commit as the current line
+						</label>
+					</div>
+				</div>
+
+				<div class="settings ml-2">
+					<div class="setting" data-enablement="blame.highlight.enabled">
+						<div class="setting__input">
+							<input
+								id="blame.highlight.locations"
+								name="blame.highlight.locations"
+								type="checkbox"
+								value="gutter"
+								data-setting
+								data-setting-type="array"
+								disabled
+							/>
+							<label for="blame.highlight.locations">Add gutter highlight</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="blame.highlight.enabled">
+						<div class="setting__input">
+							<input
+								id="blame.highlight.locations-1"
+								name="blame.highlight.locations"
+								type="checkbox"
+								value="line"
+								data-setting
+								data-setting-type="array"
+								disabled
+							/>
+							<label for="blame.highlight.locations-1">Add line highlight</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="blame.highlight.enabled">
+						<div class="setting__input">
+							<input
+								id="blame.highlight.locations-2"
+								name="blame.highlight.locations"
+								type="checkbox"
+								value="overview"
+								data-setting
+								data-setting-type="array"
+								disabled
+							/>
+							<label for="blame.highlight.locations-2">Add scroll bar highlight</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/blame.png"
+					data-visibility="blame.compact =false"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/blame-compact.png"
+					data-visibility="blame.compact"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-avatars.png"
+					data-visibility="blame.avatars &amp; blame.compact =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-avatars-compact.png"
+					data-visibility="blame.avatars &amp; blame.compact"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-highlight-gutter.png"
+					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-highlight-line.png"
+					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +line"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-highlight-scrollbar.png"
+					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-heatmap-left.png"
+					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/blame-heatmap-right.png"
+					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.blame</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/code-lens.ejs

@@ -0,0 +1,272 @@
+<section id="code-lens" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="codeLens.enabled" name="codeLens.enabled" type="checkbox" data-setting />
+			<label for="codeLens.enabled">Git Code Lens</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#git-code-lens-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds authorship code lens to the top of files and on code blocks
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<a class="command" title="Run command" href="command:gitlens.toggleCodeLens"
+						>GitLens: Toggle Git Code Lens</a
+					>
+					command to override this setting for the current window
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="codeLens.enabled">
+						<div class="setting__input">
+							<input
+								id="codeLens.recentChange.enabled"
+								name="codeLens.recentChange.enabled"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="codeLens.recentChange.enabled">
+								Add the author and date of the most recent change for the file or code block
+							</label>
+						</div>
+					</div>
+
+					<div class="settings settings--fixed ml-2">
+						<div class="setting" data-enablement="codeLens.enabled &amp; codeLens.recentChange.enabled">
+							<div class="setting__input">
+								<input
+									id="codeLens.recentChange.command"
+									name="codeLens.recentChange.command"
+									type="checkbox"
+									value="gitlens.showQuickCommitFileDetails"
+									data-setting
+									disabled
+								/>
+								<label class="nowrap" for="codeLens.recentChange.command">When clicked</label>
+								<select
+									id="codeLens.recentChange.command"
+									name="codeLens.recentChange.command"
+									data-setting
+									data-enablement="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.recentChange.command !false"
+									disabled
+								>
+									<option value="gitlens.toggleFileBlame">toggles the file blame annotations</option>
+									<option value="gitlens.diffWithPrevious"
+										>opens changes with the previous revision</option
+									>
+									<option value="gitlens.revealCommitInView"
+										>reveals the commit in the Repositories view</option
+									>
+									<option value="gitlens.showCommitsInView"
+										>shows the commit in the Search Commits view</option
+									>
+									<option value="gitlens.showQuickCommitDetails">shows details of the commit</option>
+									<option value="gitlens.showQuickCommitFileDetails">
+										shows file details of the commit
+									</option>
+									<option value="gitlens.showQuickFileHistory">shows the current file history</option>
+									<option value="gitlens.showQuickRepoHistory"
+										>shows the current branch history</option
+									>
+								</select>
+							</div>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="codeLens.enabled">
+						<div class="setting__input">
+							<input
+								id="codeLens.authors.enabled"
+								name="codeLens.authors.enabled"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="codeLens.authors.enabled">
+								Add the number of authors and the most prominent author of the file or code block
+							</label>
+						</div>
+					</div>
+
+					<div class="settings settings--fixed ml-2">
+						<div class="setting" data-enablement="codeLens.enabled &amp; codeLens.authors.enabled">
+							<div class="setting__input">
+								<input
+									id="codeLens.authors.command"
+									name="codeLens.authors.command"
+									type="checkbox"
+									value="gitlens.toggleFileBlame"
+									data-setting
+									disabled
+								/>
+								<label class="nowrap" for="codeLens.authors.command">When clicked</label>
+								<select
+									id="codeLens.authors.command"
+									name="codeLens.authors.command"
+									data-setting
+									data-enablement="codeLens.enabled &amp; codeLens.authors.enabled &amp; codeLens.authors.command !false"
+									disabled
+								>
+									<option value="gitlens.toggleFileBlame">toggles the file blame annotations</option>
+									<option value="gitlens.diffWithPrevious"
+										>opens changes with the previous revision</option
+									>
+									<option value="gitlens.revealCommitInView"
+										>reveals the commit in the Repositories view</option
+									>
+									<option value="gitlens.showCommitsInView"
+										>shows the commits within the range in the Search Commits view</option
+									>
+									<option value="gitlens.showQuickCommitDetails">shows details of the commit</option>
+									<option value="gitlens.showQuickCommitFileDetails">
+										show file details of the commit
+									</option>
+									<option value="gitlens.showQuickFileHistory">shows the current file history</option>
+									<option value="gitlens.showQuickRepoHistory"
+										>shows the current branch history</option
+									>
+								</select>
+							</div>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="codeLens.enabled">
+						<div class="setting__input">
+							<label class="non-interactive">Add code lens to the following scopes</label>
+						</div>
+					</div>
+
+					<div class="settings ml-2">
+						<div class="setting" data-enablement="codeLens.enabled">
+							<div class="setting__input">
+								<input
+									id="codeLens.scopes"
+									name="codeLens.scopes"
+									type="checkbox"
+									value="document"
+									data-setting
+									data-setting-type="array"
+									disabled
+								/>
+								<label for="codeLens.scopes">File scope</label>
+							</div>
+							<p class="setting__hint">At the top of the file</p>
+						</div>
+
+						<div class="setting" data-enablement="codeLens.enabled">
+							<div class="setting__input">
+								<input
+									id="codeLens.scopes-1"
+									name="codeLens.scopes"
+									type="checkbox"
+									value="containers"
+									data-setting
+									data-setting-type="array"
+									disabled
+								/>
+								<label for="codeLens.scopes-1">Containers scope</label>
+							</div>
+							<p class="setting__hint">
+								At the start of modules, classes, interfaces, etc
+							</p>
+						</div>
+
+						<div class="setting" data-enablement="codeLens.enabled">
+							<div class="setting__input">
+								<input
+									id="codeLens.scopes-2"
+									name="codeLens.scopes"
+									type="checkbox"
+									value="blocks"
+									data-setting
+									data-setting-type="array"
+									disabled
+								/>
+								<label for="codeLens.scopes-2">Block scope</label>
+							</div>
+							<p class="setting__hint">At the start of functions, methods, etc</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/code-lens.png" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-file-recent+authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-file-recent.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-file-authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
+				/>
+
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-containers-recent+authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-containers-recent.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-containers-authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
+				/>
+
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-blocks-recent+authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-blocks-recent.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/code-lens-blocks-authors.png"
+					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.codeLens</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/current-line.ejs

@@ -0,0 +1,107 @@
+<section id="current-line" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input
+				id="currentLine.enabled"
+				name="currentLine.enabled"
+				type="checkbox"
+				data-setting
+				data-add-settings-off="hovers.currentLine.over=line"
+			/>
+			<label for="currentLine.enabled">Current Line Blame</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#current-line-blame-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds an unobtrusive blame annotation at the end of the current line
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon--md icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<a class="command" title="Run command" href="command:gitlens.toggleLineBlame"
+						>GitLens: Toggle Line Blame Annotations</a
+					>
+					command to override this setting for the current window
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="currentLine.enabled">
+						<div class="setting__input setting__input--format">
+							<label for="currentLine.format">Annotation&nbsp;format</label>
+							<input
+								id="currentLine.format"
+								name="currentLine.format"
+								type="text"
+								placeholder="&#36;&#123;authorAgoOrDate&#125; &bull; &#36;&#123;message&#125;"
+								data-setting
+								data-default-value="&#36;&#123;authorAgoOrDate&#125; &bull; &#36;&#123;message&#125;"
+								data-popup-trigger
+								disabled
+							/>
+							<label for="currentLine.format" title="See available tokens">
+								<i class="icon icon__chevron-down"></i>
+							</label>
+						</div>
+						<div id="currentLine.format.popup" class="popup hidden"></div>
+					</div>
+
+					<div class="setting" data-enablement="currentLine.enabled">
+						<div class="setting__input">
+							<input
+								id="currentLine.scrollable"
+								name="currentLine.scrollable"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="currentLine.scrollable">
+								Include the annotation when scrolling the editor horizontally
+							</label>
+						</div>
+						<p class="setting__hint">
+							When enabled the annotation can be scrolled into view when it is outside the viewport
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/current-line-blame.png" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/current-line-blame-on.png"
+					data-visibility="currentLine.enabled"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/current-line-blame-on-scrollable.png"
+					data-visibility="currentLine.enabled &amp; currentLine.scrollable"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.currentLine</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/dates.ejs

@@ -0,0 +1,96 @@
+<section id="dates" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>Dates & Times</h2>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting">
+					<div class="setting__input">
+						<input
+							id="defaultDateStyle"
+							name="defaultDateStyle"
+							type="checkbox"
+							value="relative"
+							data-value-off="absolute"
+							data-setting
+						/>
+						<label for="defaultDateStyle">Allow relative date formatting</label>
+					</div>
+					<span class="setting__hint hidden" data-visibility="defaultDateStyle =relative"
+						>Shows some dates relatively, e.g. 1 day ago</span
+					>
+					<span class="setting__hint hidden" data-visibility="defaultDateStyle =absolute"
+						>Shows dates absolutely, e.g.
+						<span
+							data-setting-preview="defaultDateFormat"
+							data-setting-preview-type="date"
+							data-setting-preview-default="MMMM Do, YYYY h:mma"
+						></span>
+					</span>
+				</div>
+
+				<div class="settings">
+					<div class="setting">
+						<div class="setting__input">
+							<label for="defaultDateFormat">Date&nbsp;format</label>
+							<input
+								id="defaultDateFormat"
+								name="defaultDateFormat"
+								type="text"
+								placeholder="defaults to MMMM Do, YYYY h:mma"
+								data-setting
+								data-setting-preview
+							/>
+							<a
+								class="link__learn-more"
+								title="See Moment.js docs for valid date formats"
+								href="https://momentjs.com/docs/#/displaying/format/"
+							>
+								<i class="icon icon__info"></i>
+							</a>
+						</div>
+						<span class="setting__hint"
+							>Example date:
+							<span
+								data-setting-preview="defaultDateFormat"
+								data-setting-preview-type="date"
+								data-setting-preview-default="MMMM Do, YYYY h:mma"
+							></span>
+						</span>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<label for="defaultDateShortFormat">Short&nbsp;date&nbsp;format</label>
+							<input
+								id="defaultDateShortFormat"
+								name="defaultDateShortFormat"
+								type="text"
+								placeholder="defaults to MMM D, YYYY"
+								data-setting
+								data-setting-preview
+							/>
+							<a
+								class="link__learn-more"
+								title="See Moment.js docs for valid date formats"
+								href="https://momentjs.com/docs/#/displaying/format/"
+							>
+								<i class="icon icon__info"></i>
+							</a>
+						</div>
+						<span class="setting__hint"
+							>Example short date:
+							<span
+								data-setting-preview="defaultDateShortFormat"
+								data-setting-preview-type="date"
+								data-setting-preview-default="MMM D, YYYY"
+							></span>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/heatmap.ejs

@@ -0,0 +1,65 @@
+<section id="heatmap" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>
+			Gutter Heatmap
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#gutter-heatmap-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</h2>
+
+		<p class="section__header-hint">
+			Adds on-demand heatmap (age) indicator to the edge of the gutter to show how recently lines were changed
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon--md icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<span class="command hidden" data-visibility="heatmap.toggleMode =file">
+						GitLens: Toggle File Heatmap Annotations
+					</span>
+					<a
+						class="command hidden"
+						title="Run command"
+						href="command:gitlens.toggleFileHeatmap"
+						data-visibility="heatmap.toggleMode =window"
+					>
+						GitLens: Toggle File Heatmap Annotations
+					</a>
+					command to turn the annotations on or off
+				</p>
+				<p>Press <span class="shortcut-key">Esc</span> to turn off the annotations</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<p class="setting__hint">
+					<i class="icon icon__info"></i> Indicator color reflects the age of the most recent change (hot or
+					cold), while indicator brightness ranges from bright (newer) to dim (older) based on the relative
+					age
+				</p>
+
+				<div class="setting">
+					<div class="setting__input">
+						<label for="heatmap.toggleMode">Toggle annotations </label>
+						<select id="heatmap.toggleMode" name="heatmap.toggleMode" data-setting>
+							<option value="file">individually for each file</option>
+							<option value="window">for all files</option>
+						</select>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/heatmap.png" />
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/hovers.ejs

@@ -0,0 +1,341 @@
+<section id="hovers" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="hovers.enabled" name="hovers.enabled" type="checkbox" data-setting />
+			<label for="hovers.enabled">Hovers</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#hovers-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">Adds detailed blame information accessible via hovers</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="hovers.enabled">
+						<div class="setting__input">
+							<input id="hovers.avatars" name="hovers.avatars" type="checkbox" data-setting disabled />
+							<label for="hovers.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled">
+						<div class="setting__input">
+							<input
+								id="hovers.currentLine.enabled"
+								name="hovers.currentLine.enabled"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="hovers.currentLine.enabled">Show hovers for the current line</label>
+						</div>
+					</div>
+
+					<div
+						class="setting hidden"
+						data-visibility="currentLine.enabled =false"
+						data-enablement="hovers.enabled"
+					>
+						<div class="setting__input">
+							<input
+								id="hovers.currentLine.enabled-1"
+								name="hovers.currentLine.enabled"
+								type="checkbox"
+								data-setting
+								data-add-settings-on="hovers.currentLine.over=line"
+								disabled
+							/>
+							<label for="hovers.currentLine.enabled-1">Show hovers for the current line</label>
+						</div>
+					</div>
+
+					<div class="settings settings--fixed ml-2">
+						<div
+							class="setting hidden"
+							data-visibility="currentLine.enabled"
+							data-enablement="hovers.enabled &amp; hovers.currentLine.enabled"
+						>
+							<div class="setting__input">
+								<label for="hovers.currentLine.over">Shown when over the</label>
+								<select
+									id="hovers.currentLine.over"
+									name="hovers.currentLine.over"
+									data-setting
+									disabled
+								>
+									<option value="annotation">annotation only</option>
+									<option value="line">line &amp; annotation</option>
+								</select>
+							</div>
+						</div>
+
+						<div
+							class="setting hidden"
+							data-visibility="currentLine.enabled =false"
+							data-enablement="hovers.enabled &amp; hovers.currentLine.enabled &amp; currentLine.enabled"
+						>
+							<div class="setting__input">
+								<label for="hovers.currentLine.over">Shown when over the</label>
+								<select
+									id="hovers.currentLine.over"
+									name="hovers.currentLine.over"
+									data-setting
+									disabled
+								>
+									<option value="annotation">annotation only</option>
+									<option value="line">line</option>
+								</select>
+							</div>
+						</div>
+
+						<div class="setting" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled">
+							<div class="setting__input">
+								<input
+									id="hovers.currentLine.details"
+									name="hovers.currentLine.details"
+									type="checkbox"
+									data-setting
+									disabled
+								/>
+								<label for="hovers.currentLine.details">Add blame details</label>
+							</div>
+						</div>
+
+						<div class="setting" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled">
+							<div class="setting__input">
+								<input
+									id="hovers.currentLine.changes"
+									name="hovers.currentLine.changes"
+									type="checkbox"
+									data-setting
+									disabled
+								/>
+								<label for="hovers.currentLine.changes">Add changes (diff)</label>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="hovers.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/hovers-currentLine-line.png"
+					data-visibility="hovers.currentLine.over =line"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/hovers-currentLine-line.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-blame.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =line"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details+changes-avatars.png"
+					data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details+changes-avatars.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details+changes.png"
+					data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details+changes.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details-avatars.png"
+					data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details-avatars.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details.png"
+					data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-details.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-changes.png"
+					data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-line-changes.png"
+					data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
+				/>
+
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation-details+changes-avatars.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation-details+changes.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation-details-avatars.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation-details.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-currentLine-annotation-changes.png"
+					data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="hovers.enabled">
+						<div class="setting__input">
+							<input
+								id="hovers.annotations.enabled"
+								name="hovers.annotations.enabled"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="hovers.annotations.enabled">Show hovers while annotating</label>
+						</div>
+					</div>
+
+					<div class="settings settings--fixed ml-2">
+						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
+							<div class="setting__input">
+								<div class="setting__input">
+									<label for="hovers.annotations.over">Shown when over the</label>
+									<select
+										id="hovers.annotations.over"
+										name="hovers.annotations.over"
+										data-setting
+										disabled
+									>
+										<option value="annotation">annotation only</option>
+										<option value="line">line &amp; annotation</option>
+									</select>
+								</div>
+							</div>
+						</div>
+
+						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
+							<div class="setting__input">
+								<input
+									id="hovers.annotations.details"
+									name="hovers.annotations.details"
+									type="checkbox"
+									data-setting
+									disabled
+								/>
+								<label for="hovers.annotations.details">Add blame details</label>
+							</div>
+						</div>
+
+						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
+							<div class="setting__input">
+								<input
+									id="hovers.annotations.changes"
+									name="hovers.annotations.changes"
+									type="checkbox"
+									data-setting
+									disabled
+								/>
+								<label for="hovers.annotations.changes">Add changes (diff)</label>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="hovers.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/hovers-annotations.png"
+					data-visibility="blame.compact =false"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/hovers-annotations-compact.png"
+					data-visibility="blame.compact"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-details+changes-avatars.png"
+					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-details+changes.png"
+					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-details-avatars.png"
+					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.avatars"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-details.png"
+					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.avatars =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-changes.png"
+					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/hovers-annotations-heatmap.png"
+					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"
+				/>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/menus.ejs

@@ -0,0 +1,537 @@
+<section id="menus" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="menus" name="menus" type="checkbox" value="undefined" data-setting />
+			<label for="menus">Menus &amp; Toolbars</label>
+		</div>
+
+		<p class="section__header-hint">
+			Adds many helpful commands to the built-in menus &amp; toolbars
+		</p>
+
+		<div class="section__header-info">
+			<i class="icon icon__info"></i>
+			<div>
+				<p>
+					Any changes to these settings will require a
+					<a class="command" title="Reload Window" href="command:workbench.action.reloadWindow">reload</a>
+					before they will take effect
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.editor"
+							name="menus.editor"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.editor">Add commands to the editor context menu</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.compare"
+								name="menus.editor.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.remote"
+								name="menus.editor.remote"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.remote">Add open on remote commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.details"
+								name="menus.editor.details"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.details">Add commit details commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.history"
+								name="menus.editor.history"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.history">Add file history commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.blame"
+								name="menus.editor.blame"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.blame">Add blame commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editor">
+						<div class="setting__input">
+							<input
+								id="menus.editor.clipboard"
+								name="menus.editor.clipboard"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editor.clipboard">Add copy to clipboard commands</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.editorTab"
+							name="menus.editorTab"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.editorTab">Add commands to the editor tab context menu</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.editorTab">
+						<div class="setting__input">
+							<input
+								id="menus.editorTab.remote"
+								name="menus.editorTab.remote"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorTab.remote">Add open on remote commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editorTab">
+						<div class="setting__input">
+							<input
+								id="menus.editorTab.compare"
+								name="menus.editorTab.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorTab.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editorTab">
+						<div class="setting__input">
+							<input
+								id="menus.editorTab.history"
+								name="menus.editorTab.history"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorTab.history">Add file history commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editorTab">
+						<div class="setting__input">
+							<input
+								id="menus.editorTab.clipboard"
+								name="menus.editorTab.clipboard"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorTab.clipboard">Add copy to clipboard commands</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.editorGroup"
+							name="menus.editorGroup"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.editorGroup">Add commands to the editor group toolbar</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.editorGroup">
+						<div class="setting__input">
+							<input
+								id="menus.editorGroup.compare"
+								name="menus.editorGroup.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorGroup.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.editorGroup">
+						<div class="setting__input">
+							<input
+								id="menus.editorGroup.blame"
+								name="menus.editorGroup.blame"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.editorGroup.blame">Add blame commands</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.explorer"
+							name="menus.explorer"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.explorer">Add commands to the Explorer items context menu</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.explorer">
+						<div class="setting__input">
+							<input
+								id="menus.explorer.remote"
+								name="menus.explorer.remote"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.explorer.remote">Add open on remote commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.explorer">
+						<div class="setting__input">
+							<input
+								id="menus.explorer.compare"
+								name="menus.explorer.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.explorer.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.explorer">
+						<div class="setting__input">
+							<input
+								id="menus.explorer.history"
+								name="menus.explorer.history"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.explorer.history">Add file history commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.explorer">
+						<div class="setting__input">
+							<input
+								id="menus.explorer.clipboard"
+								name="menus.explorer.clipboard"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.explorer.clipboard">Add copy to clipboard commands</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.scm"
+							name="menus.scm"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.scm">Add commands to the Source Control toolbar</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.scm">
+						<div class="setting__input">
+							<input
+								id="menus.scm.authors"
+								name="menus.scm.authors"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scm.authors">Add co-authors command</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.scmGroupInline"
+							name="menus.scmGroupInline"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.scmGroupInline">Add commands to the Source Control groups toolbar</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.scmGroupInline">
+						<div class="setting__input">
+							<input
+								id="menus.scmGroupInline.stash"
+								name="menus.scmGroupInline.stash"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmGroupInline.stash">Add stash changes command</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.scmGroup"
+							name="menus.scmGroup"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.scmGroup">Add commands to the Source Control groups context menu</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.scmGroup">
+						<div class="setting__input">
+							<input
+								id="menus.scmGroup.openClose"
+								name="menus.scmGroup.openClose"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmGroup.openClose">Add open & close changed files commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmGroup">
+						<div class="setting__input">
+							<input
+								id="menus.scmGroup.compare"
+								name="menus.scmGroup.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmGroup.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmGroup">
+						<div class="setting__input">
+							<input
+								id="menus.scmGroup.stash"
+								name="menus.scmGroup.stash"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmGroup.stash">Add stash changes command</label>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting setting--expandable" data-enablement="menus">
+					<div class="setting__input">
+						<div class="setting__expander"></div>
+						<input
+							id="menus.scmItem"
+							name="menus.scmItem"
+							type="checkbox"
+							value="undefined"
+							data-setting
+							data-setting-type="object"
+							disabled
+						/>
+						<label for="menus.scmItem">Add commands to the Source Control items context menu</label>
+					</div>
+				</div>
+
+				<div class="settings ml-4">
+					<div class="setting" data-enablement="menus.scmItem">
+						<div class="setting__input">
+							<input
+								id="menus.scmItem.remote"
+								name="menus.scmItem.remote"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmItem.remote">Add open on remote commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmItem">
+						<div class="setting__input">
+							<input
+								id="menus.scmItem.compare"
+								name="menus.scmItem.compare"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmItem.compare">Add comparison commands</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmItem">
+						<div class="setting__input">
+							<input
+								id="menus.scmItem.history"
+								name="menus.scmItem.history"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmItem.history">Add file history command</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmItem">
+						<div class="setting__input">
+							<input
+								id="menus.scmItem.stash"
+								name="menus.scmItem.stash"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmItem.stash">Add stash changes command</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="menus.scmItem">
+						<div class="setting__input">
+							<input
+								id="menus.scmItem.clipboard"
+								name="menus.scmItem.clipboard"
+								type="checkbox"
+								data-setting
+								data-setting-type="object"
+								disabled
+							/>
+							<label for="menus.scmItem.clipboard">Add copy to clipboard commands</label>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/modes.ejs

@@ -0,0 +1,91 @@
+<section id="modes" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>
+			Modes
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#modes-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</h2>
+
+		<p class="section__header-hint">
+			Supports user-defined modes for quickly toggling between sets of settings
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon--md icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<a class="command" title="Run command" href="command:gitlens.switchMode">GitLens: Switch Mode</a>
+					command to quickly switch the active mode
+				</p>
+				<p>
+					Use the
+					<a class="command" title="Run command" href="command:gitlens.toggleReviewMode"
+						>GitLens: Toggle Review Mode</a
+					>
+					command to toggle Review mode
+				</p>
+				<p>
+					Use the
+					<a class="command" title="Run command" href="command:gitlens.toggleZenMode"
+						>GitLens: Toggle Zen Mode</a
+					>
+					command to toggle Zen mode
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting">
+					<div class="setting__input">
+						<input id="mode.statusBar.enabled" name="mode.statusBar.enabled" type="checkbox" data-setting />
+						<label for="mode.statusBar.enabled">Show the active mode in the status bar</label>
+					</div>
+				</div>
+
+				<div class="settings ml-2">
+					<div class="setting" data-enablement="mode.statusBar.enabled">
+						<div class="setting__input">
+							<label for="mode.statusBar.alignment">Position the annotation on the</label>
+							<select id="mode.statusBar.alignment" name="mode.statusBar.alignment" data-setting disabled>
+								<option value="left">left</option>
+								<option value="right">right</option>
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/status-bar.png" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/modes-status-bar-left.png"
+					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =left"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/modes-status-bar-right.png"
+					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =right"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options or to add your own custom modes, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.modes</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/recent-changes.ejs

@@ -0,0 +1,118 @@
+<section id="recent-changes" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>
+			Recent Changes
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#recent-changes-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</h2>
+
+		<p class="section__header-hint">
+			Adds on-demand recent changes annotations to highlight lines changed by the most recent commit
+		</p>
+		<div class="section__header-info">
+			<i class="icon icon--md icon__bulb"></i>
+			<div>
+				<p>
+					Use the
+					<span class="command hidden" data-visibility="recentChanges.toggleMode =file">
+						GitLens: Toggle Recent File Changes Annotations
+					</span>
+					<a
+						class="command hidden"
+						title="Run command"
+						href="command:gitlens.toggleFileRecentChanges"
+						data-visibility="recentChanges.toggleMode =window"
+					>
+						GitLens: Toggle Recent File Changes Annotations
+					</a>
+					command to turn the annotations on or off
+				</p>
+				<p>Press <span class="shortcut-key">Esc</span> to turn off the annotations</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting">
+					<div class="setting__input">
+						<label for="recentChanges.toggleMode">Toggle annotations </label>
+						<select id="recentChanges.toggleMode" name="recentChanges.toggleMode" data-setting>
+							<option value="file">individually for each file</option>
+							<option value="window">for all files</option>
+						</select>
+					</div>
+				</div>
+
+				<div class="settings">
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="recentChanges.highlight.locations"
+								name="recentChanges.highlight.locations"
+								type="checkbox"
+								value="gutter"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="recentChanges.highlight.locations">Add gutter highlight</label>
+						</div>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="recentChanges.highlight.locations-1"
+								name="recentChanges.highlight.locations"
+								type="checkbox"
+								value="line"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="recentChanges.highlight.locations-1">Add line highlight</label>
+						</div>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="recentChanges.highlight.locations-2"
+								name="recentChanges.highlight.locations"
+								type="checkbox"
+								value="overview"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="recentChanges.highlight.locations-2">Add scroll bar highlight</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/recent-changes.png" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/recent-changes-highlight-gutter.png"
+					data-visibility="recentChanges.highlight.locations +gutter"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/recent-changes-highlight-line.png"
+					data-visibility="recentChanges.highlight.locations +line"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/recent-changes-highlight-scrollbar.png"
+					data-visibility="recentChanges.highlight.locations +overview"
+				/>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/shortcuts.ejs

@@ -0,0 +1,54 @@
+<section id="shortcuts" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>Keyboard Shortcuts</h2>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="setting">
+					<div class="setting__input">
+						<label for="keymap">Use</label>
+						<select id="keymap" name="keymap" data-setting>
+							<option value="alternate">alt-based</option>
+							<option value="chorded">chorded (default)</option>
+							<option value="none">user-defined</option>
+						</select>
+						<label for="keymap"> keyboard shortcuts</label>
+					</div>
+					<span class="setting__hint hidden" data-visibility="keymap =alternate">
+						<span class="shortcut-key">Alt</span> based (<span class="shortcut-key">&#x2325;</span>
+						on macOS) shortcuts. Not great for non-English keyboard layouts
+					</span>
+					<span class="setting__hint hidden" data-visibility="keymap =chorded">
+						Chorded shortcuts that start with
+						<span class="shortcut-key">Ctrl+Shift+G</span> (<span class="shortcut-key"
+							>&#x2325;&#x2318;G</span
+						>
+						on macOS). Better for non-English keyboard layouts
+					</span>
+					<span class="setting__hint hidden" data-visibility="keymap =none">
+						GitLens won't bind any keyboard shortcuts. Configure your own via the
+						<a
+							class="command"
+							title="Open Keyboard Shortcuts"
+							href="command:workbench.action.openGlobalKeybindings"
+							>Keyboard Shortcuts</a
+						>
+						editor
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> Search for <b><i>gitlens</i></b> in the
+				<a class="command" title="Open Keyboard Shortcuts" href="command:workbench.action.openGlobalKeybindings"
+					>Keyboard Shortcuts</a
+				>
+				editor to see the shortcuts and to customize them further
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/status-bar.ejs

@@ -0,0 +1,126 @@
+<section id="status-bar" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="statusBar.enabled" name="statusBar.enabled" type="checkbox" data-setting />
+			<label for="statusBar.enabled">Status Bar Blame</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#status-bar-blame-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a Git blame annotation about the current line to the status bar
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="statusBar.enabled">
+						<div class="setting__input setting__input--format">
+							<label for="statusBar.format">Annotation&nbsp;format</label>
+							<input
+								id="statusBar.format"
+								name="statusBar.format"
+								type="text"
+								placeholder="&#36;&#123;authorAgoOrDate&#125;"
+								data-setting
+								data-default-value="&#36;&#123;authorAgoOrDate&#125;"
+								data-popup-trigger
+								disabled
+							/>
+							<label for="statusBar.format" title="See available tokens">
+								<i class="icon icon__chevron-down"></i>
+							</label>
+							<div id="statusBar.format.popup" class="popup hidden"></div>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="statusBar.enabled">
+						<div class="setting__input">
+							<label for="statusBar.alignment">Position the annotation on the</label>
+							<select id="statusBar.alignment" name="statusBar.alignment" data-setting disabled>
+								<option value="left">left</option>
+								<option value="right">right</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="statusBar.enabled">
+						<div class="setting__input">
+							<label class="nowrap" for="statusBar.command">When clicked</label>
+							<select id="statusBar.command" name="statusBar.command" data-setting disabled>
+								<option value="gitlens.toggleFileBlame">toggles the file blame annotations</option>
+								<option value="gitlens.diffWithPrevious"
+									>opens line changes with the previous revision</option
+								>
+								<option value="gitlens.diffWithWorking"
+									>opens line changes with the working file</option
+								>
+								<option value="gitlens.revealCommitInView"
+									>reveals the commit in the Repositories view</option
+								>
+								<option value="gitlens.showCommitsInView"
+									>shows the commit in the Search Commits view</option
+								>
+								<option value="gitlens.toggleCodeLens">toggles the Git code lens</option>
+								<option value="gitlens.showQuickCommitDetails">shows details of the commit</option>
+								<option value="gitlens.showQuickCommitFileDetails"
+									>shows file details of the commit</option
+								>
+								<option value="gitlens.showQuickFileHistory">shows the current file history</option>
+								<option value="gitlens.showQuickRepoHistory">shows the current branch history</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="statusBar.enabled">
+						<div class="setting__input">
+							<input
+								id="statusBar.reduceFlicker"
+								name="statusBar.reduceFlicker"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="statusBar.reduceFlicker">Reduce flashing when updating the annotation</label>
+						</div>
+						<p class="setting__hint">
+							Avoids clearing the previous blame information when changing lines to reduce status bar
+							"flashing"
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview">
+				<img class="image__preview" src="#{root}/images/settings/status-bar.png" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/status-bar-left.png"
+					data-visibility="statusBar.enabled &amp; statusBar.alignment =left"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/status-bar-right.png"
+					data-visibility="statusBar.enabled &amp; statusBar.alignment =right"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.statusBar</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.compare.ejs

@@ -0,0 +1,116 @@
+<section id="compare-view" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="views.compare.enabled" name="views.compare.enabled" type="checkbox" data-setting />
+			<label for="views.compare.enabled">Compare view</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#compare-view-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a Compare view to visualize comparisons between branches, tags, commits, and more
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="views.compare.enabled">
+						<div class="setting__input">
+							<label for="views.compare.location">Show in the</label>
+							<select id="views.compare.location" name="views.compare.location" data-setting disabled>
+								<option value="gitlens">GitLens side bar</option>
+								<option value="explorer">Explorer side bar</option>
+								<option value="scm">Source Control side bar</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.compare.enabled">
+						<div class="setting__input">
+							<label for="views.compare.files.layout">Layout files</label>
+							<select
+								id="views.compare.files.layout"
+								name="views.compare.files.layout"
+								data-setting
+								disabled
+							>
+								<option value="auto">automatically</option>
+								<option value="list">as a list</option>
+								<option value="tree">as a tree</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.compare.enabled">
+						<div class="setting__input">
+							<input
+								id="views.compare.files.compact"
+								name="views.compare.files.compact"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.compare.files.compact">Use compact file layout</label>
+						</div>
+						<p class="setting__hint">
+							Compacts (flattens) unnecessary nesting when using a tree layouts
+						</p>
+					</div>
+
+					<div class="setting" data-enablement="views.compare.enabled">
+						<div class="setting__input">
+							<input
+								id="views.compare.avatars"
+								name="views.compare.avatars"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.compare.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="views.compare.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-compare.png"
+					data-visibility="views.compare.enabled &amp; views.compare.files.layout !tree"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-compare-tree-compact.png"
+					data-visibility="views.compare.enabled &amp; views.compare.files.layout =tree &amp; views.compare.files.compact"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-compare-tree.png"
+					data-visibility="views.compare.enabled &amp; views.compare.files.layout =tree &amp; views.compare.files.compact =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/view-compare-avatars.png"
+					data-visibility="views.compare.enabled &amp; views.compare.avatars"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.views.compare</i></b> or <b><i>gitlens.views</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.ejs

@@ -0,0 +1,51 @@
+<section id="views" class="section--settings section--collapsible">
+	<div class="section__header">
+		<h2>
+			Views
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#side-bar-views"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</h2>
+		<p class="section__header-hint">Adds rich views to visualize, navigate, and explore</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<p class="blurb mt-0">
+					GitLens views can be configured to be shown in different side bar layouts to best match your
+					workflow
+				</p>
+				<div class="presets mb-1">
+					<div class="preset">
+						<a
+							class="button button--flat"
+							title="Shows all the views together on the GitLens side bar"
+							href="command:gitlens.setViewsLayout?%7B%22layout%22%3A%22default%22%7D"
+							>GitLens Layout (default)</a
+						>
+						<p>Shows all the views together on the GitLens side bar</p>
+					</div>
+					<div class="preset">
+						<a
+							class="button button--flat"
+							title="Shows all the views together on the Source Control side bar"
+							href="command:gitlens.setViewsLayout?%7B%22layout%22%3A%22scm%22%7D"
+							>Source Control Layout</a
+						>
+						<p>Shows all the views together on the Source Control side bar</p>
+					</div>
+				</div>
+
+				<p class="section__hint">
+					<i class="icon icon__info"></i> You can also simply drag &amp; drop individual views to create
+					custom layouts
+				</p>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.file-history.ejs

@@ -0,0 +1,69 @@
+<section id="file-history-view" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="views.fileHistory.enabled" name="views.fileHistory.enabled" type="checkbox" data-setting />
+			<label for="views.fileHistory.enabled">File History view</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#file-history-view-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a File History view to visualize, navigate, and explore the revision history of the current file
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="views.fileHistory.enabled">
+						<div class="setting__input">
+							<label for="views.fileHistory.location">Show in the</label>
+							<select
+								id="views.fileHistory.location"
+								name="views.fileHistory.location"
+								data-setting
+								disabled
+							>
+								<option value="gitlens">GitLens side bar</option>
+								<option value="explorer">Explorer side bar</option>
+								<option value="scm">Source Control side bar</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.fileHistory.enabled">
+						<div class="setting__input">
+							<input
+								id="views.fileHistory.avatars"
+								name="views.fileHistory.avatars"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.fileHistory.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="views.fileHistory.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-file-history.png"
+					data-visibility="views.fileHistory.enabled"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/view-file-history-avatars.png"
+					data-visibility="views.fileHistory.enabled &amp; views.fileHistory.avatars"
+				/>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.line-history.ejs

@@ -0,0 +1,70 @@
+<section id="line-history-view" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="views.lineHistory.enabled" name="views.lineHistory.enabled" type="checkbox" data-setting />
+			<label for="views.lineHistory.enabled">Line History view</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#line-history-view-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a Line History view to visualize, navigate, and explore the revision history of the selected lines of
+			current file
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="views.lineHistory.enabled">
+						<div class="setting__input">
+							<label for="views.lineHistory.location">Show in the</label>
+							<select
+								id="views.lineHistory.location"
+								name="views.lineHistory.location"
+								data-setting
+								disabled
+							>
+								<option value="gitlens">GitLens side bar</option>
+								<option value="explorer">Explorer side bar</option>
+								<option value="scm">Source Control side bar</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.lineHistory.enabled">
+						<div class="setting__input">
+							<input
+								id="views.lineHistory.avatars"
+								name="views.lineHistory.avatars"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.lineHistory.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="views.lineHistory.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-line-history.png"
+					data-visibility="views.lineHistory.enabled"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/view-line-history-avatars.png"
+					data-visibility="views.lineHistory.enabled &amp; views.lineHistory.avatars"
+				/>
+			</div>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.repositories.ejs

@@ -0,0 +1,220 @@
+<section id="repositories-view" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="views.repositories.enabled" name="views.repositories.enabled" type="checkbox" data-setting />
+			<label for="views.repositories.enabled">Repositories view</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#repositories-view-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a Repositories view to visualize, navigate, and explore Git repositories
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<label for="views.repositories.location">Show in the</label>
+							<select
+								id="views.repositories.location"
+								name="views.repositories.location"
+								data-setting
+								disabled
+							>
+								<option value="gitlens">GitLens side bar</option>
+								<option value="explorer">Explorer side bar</option>
+								<option value="scm">Source Control side bar</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<input
+								id="views.repositories.showBranchComparison"
+								name="views.repositories.showBranchComparison"
+								type="checkbox"
+								value="working"
+								data-setting
+								disabled
+							/>
+							<label for="views.repositories.showBranchComparison"
+								>Show a comparison of a user-selected reference (branch, tag, etc) to the
+								<select
+									id="views.repositories.showBranchComparison"
+									name="views.repositories.showBranchComparison"
+									data-setting
+									data-enablement="views.repositories.enabled &amp; views.repositories.showBranchComparison !false"
+									disabled
+								>
+									<option value="branch">current branch</option>
+									<option value="working">working tree</option>
+								</select>
+							</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<label for="views.repositories.branches.layout">Layout branches</label>
+							<select
+								id="views.repositories.branches.layout"
+								name="views.repositories.branches.layout"
+								data-setting
+								disabled
+							>
+								<option value="list">as a list</option>
+								<option value="tree">as a tree</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<label for="sortBranchesBy">Sort branches</label>
+							<select id="sortBranchesBy" name="sortBranchesBy" data-setting disabled>
+								<option value="name:desc">by name, descending</option>
+								<option value="name:asc">by name, ascending</option>
+								<option value="date:desc">by date, descending</option>
+								<option value="date:asc">by date, ascending</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<label for="sortTagsBy">Sort tags</label>
+							<select id="sortTagsBy" name="sortTagsBy" data-setting disabled>
+								<option value="name:desc">by name, descending</option>
+								<option value="name:asc">by name, ascending</option>
+								<option value="date:desc">by date, descending</option>
+								<option value="date:asc">by date, ascending</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<label for="views.repositories.files.layout">Layout files</label>
+							<select
+								id="views.repositories.files.layout"
+								name="views.repositories.files.layout"
+								data-setting
+								disabled
+							>
+								<option value="auto">automatically</option>
+								<option value="list">as a list</option>
+								<option value="tree">as a tree</option>
+							</select>
+						</div>
+						<p class="setting__hint" data-visibility="views.repositories.files.layout =auto">
+							Chooses the best layout based on the number of files at each nesting level
+						</p>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<input
+								id="views.repositories.files.compact"
+								name="views.repositories.files.compact"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.repositories.files.compact">Use compact file layout</label>
+						</div>
+						<p class="setting__hint">
+							Compacts (flattens) unnecessary nesting when using a tree layouts
+						</p>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<input
+								id="views.repositories.avatars"
+								name="views.repositories.avatars"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.repositories.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<input
+								id="views.repositories.autoRefresh"
+								name="views.repositories.autoRefresh"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.repositories.autoRefresh">
+								Automatically refreshes when the file system or any repository changes
+							</label>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.repositories.enabled">
+						<div class="setting__input">
+							<input
+								id="views.repositories.autoReveal"
+								name="views.repositories.autoReveal"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.repositories.autoReveal">
+								Automatically reveal repositories when opening files
+							</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="views.repositories.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-repositories.png"
+					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout !tree"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-repositories-tree-compact.png"
+					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout =tree &amp; views.repositories.files.compact"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-repositories-tree.png"
+					data-visibility="views.repositories.enabled &amp; views.repositories.files.layout =tree &amp; views.repositories.files.compact =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/view-repositories-avatars.png"
+					data-visibility="views.repositories.enabled &amp; views.repositories.avatars"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.views.repositories</i></b> or
+				<b><i>gitlens.views</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/partials/views.search.ejs

@@ -0,0 +1,116 @@
+<section id="search-commits-view" class="section--settings section--collapsible">
+	<div class="section__header">
+		<div class="setting__input setting__input--big">
+			<input id="views.search.enabled" name="views.search.enabled" type="checkbox" data-setting />
+			<label for="views.search.enabled">Search Commits view</label>
+			<a
+				class="link__learn-more"
+				title="Learn more"
+				href="https://github.com/eamodio/vscode-gitlens/tree/master/#search-commits-view-"
+			>
+				<i class="icon icon__info"></i>
+			</a>
+		</div>
+
+		<p class="section__header-hint">
+			Adds a Search Commits view to search and explore commit histories by message, author, files, id, etc
+		</p>
+	</div>
+
+	<div class="section__collapsible">
+		<div class="section__group">
+			<div class="section__content">
+				<div class="settings settings--fixed ml-1">
+					<div class="setting" data-enablement="views.search.enabled">
+						<div class="setting__input">
+							<label for="views.search.location">Show in the</label>
+							<select id="views.search.location" name="views.search.location" data-setting disabled>
+								<option value="gitlens">GitLens side bar</option>
+								<option value="explorer">Explorer side bar</option>
+								<option value="scm">Source Control side bar</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.search.enabled">
+						<div class="setting__input">
+							<label for="views.search.files.layout">Layout files</label>
+							<select
+								id="views.search.files.layout"
+								name="views.search.files.layout"
+								data-setting
+								disabled
+							>
+								<option value="auto">automatically</option>
+								<option value="list">as a list</option>
+								<option value="tree">as a tree</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="setting" data-enablement="views.search.enabled">
+						<div class="setting__input">
+							<input
+								id="views.search.files.compact"
+								name="views.search.files.compact"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.search.files.compact">Use compact file layout</label>
+						</div>
+						<p class="setting__hint">
+							Compacts (flattens) unnecessary nesting when using a tree layouts
+						</p>
+					</div>
+
+					<div class="setting" data-enablement="views.search.enabled">
+						<div class="setting__input">
+							<input
+								id="views.search.avatars"
+								name="views.search.avatars"
+								type="checkbox"
+								data-setting
+								disabled
+							/>
+							<label for="views.search.avatars">Use author avatars icons</label>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="section__preview" data-visibility="views.search.enabled">
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-search.png"
+					data-visibility="views.search.enabled &amp; views.search.files.layout !tree"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-search-tree-compact.png"
+					data-visibility="views.search.enabled &amp; views.search.files.layout =tree &amp; views.search.files.compact"
+				/>
+				<img
+					class="image__preview hidden"
+					src="#{root}/images/settings/view-search-tree.png"
+					data-visibility="views.search.enabled &amp; views.search.files.layout =tree &amp; views.search.files.compact =false"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/view-search-avatars.png"
+					data-visibility="views.search.enabled &amp; views.search.avatars"
+				/>
+			</div>
+		</div>
+
+		<div class="section__group">
+			<p class="section__hint">
+				<i class="icon icon__info"></i> For more options, open
+				<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+					>User Settings</a
+				>
+				and search for <b><i>gitlens.views.search</i></b> or <b><i>gitlens.views</i></b>
+			</p>
+		</div>
+	</div>
+</section>

src/webviews/apps/settings/settings.ejs

@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+	</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 Id</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 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>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>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>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>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">
+		<div class="container">
+			<header>
+				<a class="header__link" title="Learn more about GitLens" href="https://gitlens.amod.io">
+					<div class="header__logo">
+						<img class="image__logo" src="#{root}/images/gitlens-icon.png" />
+						<div>
+							<h1>Git<span class="header__logo--highlight">Lens</span></h1>
+							<p class="header__subtitle">Git supercharged</p>
+						</div>
+					</div>
+				</a>
+				<p class="header__blurb">
+					GitLens <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to
+					<b>visualize code authorship</b> at a glance via Git blame annotations and code lens,
+					<b>seamlessly navigate and explore</b> Git repositories, <b>gain valuable insights</b> via powerful
+					comparison commands, and so much more.
+				</p>
+			</header>
+
+			<div class="hero__area hero__area--sticky">
+				<div class="hero__row">
+					<h2 class="hero__title">Settings</h2>
+					<div class="hero__title-actions">
+						<a href="#" data-action="collapse" title="Collapse all sections">collapse all</a>
+						<a href="#" data-action="expand" class="hidden" title="Expand all sections">expand all</a>
+					</div>
+					<div class="hero__toolbar">
+						<div class="hero__toolbar-scope hidden">
+							<label for="scopes">Save Settings to</label>
+							<select id="scopes" name="scope"> </select>
+						</div>
+					</div>
+				</div>
+				<p class="hero__subtitle">
+					For advanced customizations, refer to the
+					<a
+						title="See the GitLens settings docs"
+						href="https://github.com/eamodio/vscode-gitlens/tree/master/#gitlens-settings-"
+						>GitLens docs</a
+					>
+					and edit your
+					<a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings"
+						>User Settings</a
+					>
+				</p>
+			</div>
+
+			<div class="content__area content__area--full-scroll">
+				<!-- prettier-ignore -->
+				<%= require('./partials/current-line.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/code-lens.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/status-bar.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/hovers.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.repositories.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.file-history.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.line-history.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.search.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/views.compare.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/blame.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/heatmap.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/recent-changes.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/dates.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/menus.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/shortcuts.ejs')() %>
+				<!-- prettier-ignore -->
+				<%= require('./partials/modes.ejs')() %>
+			</div>
+
+			<div class="sidebar">
+				<div class="sidebar__group">
+					<h2>Jump to</h2>
+					<ul>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#current-line"
+								title="Jump to Current Line Blame settings"
+								>Current Line Blame</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#code-lens"
+								title="Jump to Git Code Lens settings"
+								>Git Code Lens</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#status-bar"
+								title="Jump to Status Bar Blame settings"
+								>Status Bar Blame</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#hovers"
+								title="Jump to Hovers settings"
+								>Hovers</a
+							>
+						</li>
+
+						<li class="mt-1">
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#views"
+								title="Jump to Views settings"
+								>Views</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#repositories-view"
+								title="Jump to Repositories view settings"
+								>Repositories view</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#file-history-view"
+								title="Jump to File History view settings"
+								>File History view</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#line-history-view"
+								title="Jump to Line History view settings"
+								>Line History view</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#search-commits-view"
+								title="Jump to Search Commits view settings"
+								>Search Commits view</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#compare-view"
+								title="Jump to Compare view settings"
+								>Compare view</a
+							>
+						</li>
+
+						<li class="mt-1">
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#blame"
+								title="Jump to Gutter Blame settings"
+								>Gutter Blame</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#heatmap"
+								title="Jump to Gutter Heatmap settings"
+								>Gutter Heatmap</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#recent-changes"
+								title="Jump to Recent Changes settings"
+								>Recent Changes</a
+							>
+						</li>
+
+						<li class="mt-1">
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#dates"
+								title="Jump to Dates & Times settings"
+								>Dates & Times</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#menus"
+								title="Jump to Menus & Toolbars settings"
+								>Menus & Toolbars</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#shortcuts"
+								title="Jump to Keyboard Shortcuts settings"
+								>Keyboard Shortcuts</a
+							>
+						</li>
+						<li>
+							<a
+								class="sidebar__jump-link"
+								data-action="jump"
+								href="#modes"
+								title="Jump to Modes settings"
+								>Modes</a
+							>
+						</li>
+					</ul>
+				</div>
+				<div class="sidebar__group">
+					<a
+						class="button button--flat-primary mt-1"
+						title="Sponsor GitLens"
+						href="https://gitlens.amod.io/#sponsor"
+						>&#x2764; GitLens
+					</a>
+				</div>
+				<div class="sidebar__group">
+					<h2>Help</h2>
+					<ul>
+						<li>
+							<a href="https://github.com/eamodio/vscode-gitlens/blob/master/README.md">Documentation</a>
+						</li>
+						<li>
+							<a href="https://github.com/eamodio/vscode-gitlens/issues">Questions &amp; Issues</a>
+						</li>
+						<li>
+							<a href="https://vscode-slack.amod.io">Slack</a>
+							<small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens channel</small>
+						</li>
+						<li>
+							<a href="https://twitter.com/eamodio">Twitter</a>
+							<small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens hashtag</small>
+						</li>
+					</ul>
+				</div>
+				<div class="sidebar__group">
+					<h2>Resources</h2>
+					<ul>
+						<li><a href="https://gitlens.amod.io">Website</a></li>
+						<li>
+							<a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/changelog">Changelog</a>
+						</li>
+						<li>
+							<a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens"
+								>Marketplace</a
+							>
+						</li>
+						<li><a href="https://github.com/eamodio/vscode-gitlens">GitHub</a></li>
+						<li>
+							<a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/license">License</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+
+		#{endOfBody}
+	</body>
+</html>

src/webviews/webviewBase.ts

@@ -8,6 +8,7 @@ import {
 	Disposable,
 	Uri,
 	ViewColumn,
+	Webview,
 	WebviewPanel,
 	WebviewPanelOnDidChangeViewStateEvent,
 	window,
@@ -101,7 +102,7 @@ export abstract class WebviewBase implements Disposable {
 						const inspect = configuration.inspect(key as any)!;
 
 						let value = params.changes[key];
-						if (value !== undefined) {
+						if (value != null) {
 							if (params.scope === 'workspace') {
 								if (value === inspect.workspaceValue) continue;
 							} else {
@@ -136,25 +137,21 @@ export abstract class WebviewBase implements Disposable {
 	}
 
 	get visible() {
-		return this._panel === undefined ? false : this._panel.visible;
+		return this._panel?.visible ?? false;
 	}
 
 	hide() {
-		if (this._panel === undefined) return;
-
-		this._panel.dispose();
+		this._panel?.dispose();
 	}
 
 	setTitle(title: string) {
-		if (this._panel === undefined) return;
+		if (this._panel == null) return;
 
 		this._panel.title = title;
 	}
 
 	async show(column: ViewColumn = ViewColumn.Active): Promise<void> {
-		const html = await this.getHtml();
-
-		if (this._panel === undefined) {
+		if (this._panel == null) {
 			this._panel = window.createWebviewPanel(
 				this.id,
 				this.title,
@@ -176,17 +173,20 @@ export abstract class WebviewBase implements Disposable {
 				...this.registerCommands(),
 			);
 
-			this._panel.webview.html = html;
+			this._panel.webview.html = await this.getHtml(this._panel.webview);
 		} else {
+			const html = await this.getHtml(this._panel.webview);
+
 			// Reset the html to get the webview to reload
 			this._panel.webview.html = '';
 			this._panel.webview.html = html;
+
 			this._panel.reveal(this._panel.viewColumn ?? ViewColumn.Active, false);
 		}
 	}
 
 	private _html: string | undefined;
-	private async getHtml(): Promise<string> {
+	private async getHtml(webview: Webview): Promise<string> {
 		const filename = Container.context.asAbsolutePath(paths.join('dist/webviews/', this.filename));
 
 		let content;
@@ -202,16 +202,15 @@ export abstract class WebviewBase implements Disposable {
 				});
 			});
 		} else {
-			if (this._html !== undefined) return this._html;
+			if (this._html != null) return this._html;
 
 			const doc = await workspace.openTextDocument(filename);
 			content = doc.getText();
 		}
 
-		let html = content.replace(
-			/#{root}/g,
-			Uri.file(Container.context.asAbsolutePath('.')).with({ scheme: 'vscode-resource' }).toString(),
-		);
+		let html = content
+			.replace(/#{cspSource}/g, webview.cspSource)
+			.replace(/#{root}/g, webview.asWebviewUri(Uri.file(Container.context.asAbsolutePath('.'))).toString());
 
 		if (this.renderHead) {
 			html = html.replace(/#{head}/i, await this.renderHead());
@@ -249,7 +248,7 @@ export abstract class WebviewBase implements Disposable {
 	}
 
 	private postMessage(message: IpcMessage) {
-		if (this._panel === undefined) return Promise.resolve(false);
+		if (this._panel == null) return Promise.resolve(false);
 
 		return this._panel.webview.postMessage(message);
 	}

webpack.config.js

@@ -210,12 +210,12 @@ function getWebviewsConfig(mode, env) {
 
 	const cspPolicy = {
 		'default-src': "'none'",
-		'img-src': ['vscode-resource:', 'https:', 'data:'],
-		'script-src': ['vscode-resource:', "'nonce-Z2l0bGVucy1ib290c3RyYXA='"],
-		'style-src': ['vscode-resource:'],
+		'img-src': ['#{cspSource}', 'https:', 'data:'],
+		'script-src': ['#{cspSource}', "'nonce-Z2l0bGVucy1ib290c3RyYXA='"],
+		'style-src': ['#{cspSource}'],
 	};
 
-	if (mode === 'production') {
+	if (mode !== 'production') {
 		cspPolicy['script-src'].push("'unsafe-eval'");
 	}
 
@@ -237,7 +237,7 @@ function getWebviewsConfig(mode, env) {
 		new HtmlPlugin({
 			excludeAssets: [/.+-styles\.js/],
 			excludeChunks: ['welcome'],
-			template: 'settings/index.html',
+			template: 'settings/settings.ejs',
 			filename: path.resolve(__dirname, 'dist/webviews/settings.html'),
 			inject: true,
 			cspPlugin: {
@@ -265,7 +265,7 @@ function getWebviewsConfig(mode, env) {
 		new HtmlPlugin({
 			excludeAssets: [/.+-styles\.js/],
 			excludeChunks: ['settings'],
-			template: 'welcome/index.html',
+			template: 'welcome/welcome.ejs',
 			filename: path.resolve(__dirname, 'dist/webviews/welcome.html'),
 			inject: true,
 			cspPlugin: {
@@ -317,10 +317,11 @@ function getWebviewsConfig(mode, env) {
 		context: path.resolve(__dirname, 'src/webviews/apps'),
 		entry: {
 			'main-styles': ['./scss/main.scss'],
-			settings: ['./settings/index.ts'],
-			welcome: ['./welcome/index.ts'],
+			settings: ['./settings/settings.ts'],
+			welcome: ['./welcome/welcome.ts'],
 		},
 		mode: mode,
+		target: 'web',
 		devtool: mode === 'production' ? undefined : 'eval-source-map',
 		output: {
 			filename: '[name].js',
@@ -364,6 +365,10 @@ function getWebviewsConfig(mode, env) {
 					],
 					exclude: /node_modules/,
 				},
+				{
+					test: /\.ejs$/,
+					loader: 'ejs-loader',
+				},
 			],
 		},
 		resolve: {

yarn.lock

@@ -64,13 +64,13 @@
     once "^1.4.0"
 
 "@octokit/request@^5.3.0":
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.3.tgz#85b78ea4ae6e1c4ac2b02528102d4cd776145935"
-  integrity sha512-RtqMzF3mhqxmWoqVD84x2gdtbqn2inTBU/HPkWf5u0R5r7fBTaLPAcCBgukeI2gjTwD9ChL9Cu0MlTBs7B/tSw==
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.4.tgz#dc57e85e86284fa016d0c1a2701a70a10cec4ff2"
+  integrity sha512-vqv1lz41c6VTxUvF9nM+a6U+vvP3vGk7drDpr0DVQg4zyqlOiKVrY17DLD6de5okj+YLHKcoqaUZTBtlNZ1BtQ==
   dependencies:
     "@octokit/endpoint" "^6.0.1"
     "@octokit/request-error" "^2.0.0"
-    "@octokit/types" "^2.11.1"
+    "@octokit/types" "^4.0.1"
     deprecation "^2.0.0"
     is-plain-object "^3.0.0"
     node-fetch "^2.3.0"
@@ -85,9 +85,9 @@
     "@types/node" ">= 8"
 
 "@octokit/types@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-4.0.1.tgz#dd32ff2407699f3a0c909cdd24de17b45b7d7051"
-  integrity sha512-Ho6h7w2h9y8RRE8r656hIj1oiSbwbIHJGF5r9G5FOwS2VdDPq8QLGvsG4x6pKHpvyGK7j+43sAc2cJKMiFoIJw==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-4.0.2.tgz#4e5be1ed1d39532f6b1bc5ad7ce52086a83cf379"
+  integrity sha512-+4X6qfhT/fk/5FD66395NrFLxCzD6FsGlpPwfwvnukdyfYbhiZB/FJltiT1XM5Q63rGGBSf9FPaNV3WpNHm54A==
   dependencies:
     "@types/node" ">= 8"
 
@@ -829,6 +829,11 @@ bfj@^6.1.1:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -2181,6 +2186,14 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+ejs-loader@0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/ejs-loader/-/ejs-loader-0.3.6.tgz#e6ce60ce8234bd1ce8e69ea59fab0d3b350d4935"
+  integrity sha512-HdnKczoNzvqTlwCbkwEIAKdrC5JWExBbIqh0GLqzmeCX5LYt5wWjq2JXwU9vcAVgn74gGKxcZIleuZF6jnmVdw==
+  dependencies:
+    loader-utils "^0.2.7"
+    lodash "^4.17.15"
+
 ejs@^2.6.1:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
@@ -4154,6 +4167,11 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -4286,6 +4304,16 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@^0.2.7:
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
+  integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+    object-assign "^4.0.1"
+
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -7081,10 +7109,10 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-loader@7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.4.tgz#5d9b95227de5afb91fdd9668f8920eb193cfe0cc"
-  integrity sha512-5du6OQHl+4ZjO4crEyoYUyWSrmmo7bAO+inkaILZ68mvahqrfoa4nn0DRmpQ4ruT4l+cuJCgF0xD7SBIyLeeow==
+ts-loader@7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-7.0.5.tgz#789338fb01cb5dc0a33c54e50558b34a73c9c4c5"
+  integrity sha512-zXypEIT6k3oTc+OZNx/cqElrsbBtYqDknf48OZos0NQ3RTt045fBIU8RRSu+suObBzYB355aIPGOe/3kj9h7Ig==
   dependencies:
     chalk "^2.3.0"
     enhanced-resolve "^4.0.0"