Add "show HEAD" button

When clicked it jumps to the currently checked out commit.

Author: Timmmm

src/gitGraphView.ts

@@ -721,6 +721,7 @@ export class GitGraphView extends Disposable {
 					<span id="repoControl"><span class="unselectable">Repo: </span><div id="repoDropdown" class="dropdown"></div></span>
 					<span id="branchControl"><span class="unselectable">Branches: </span><div id="branchDropdown" class="dropdown"></div></span>
 					<label id="showRemoteBranchesControl"><input type="checkbox" id="showRemoteBranchesCheckbox" tabindex="-1"><span class="customCheckbox"></span>Show Remote Branches</label>
+					<div id="headBtn" title="Scroll to HEAD"></div>
 					<div id="findBtn" title="Find"></div>
 					<div id="terminalBtn" title="Open a Terminal for this Repository"></div>
 					<div id="settingsBtn" title="Repository Settings"></div>

web/main.ts

@@ -145,7 +145,21 @@ class GitGraphView {
 			this.requestLoadRepoInfoAndCommits(false, false);
 		}
 
-		const fetchBtn = document.getElementById('fetchBtn')!, findBtn = document.getElementById('findBtn')!, settingsBtn = document.getElementById('settingsBtn')!, terminalBtn = document.getElementById('terminalBtn')!;
+		const headBtn = document.getElementById('headBtn')!;
+		const fetchBtn = document.getElementById('fetchBtn')!;
+		const findBtn = document.getElementById('findBtn')!;
+		const settingsBtn = document.getElementById('settingsBtn')!;
+		const terminalBtn = document.getElementById('terminalBtn')!;
+
+		headBtn.innerHTML = SVG_ICONS.eyeOpen;
+		headBtn.addEventListener('click', () => {
+			const headDots = document.getElementsByClassName('commitHeadDot');
+			if (headDots.length === 1) {
+				// Scroll its parent (the commit row) into view. If you just
+				// scroll the dot into view it chops off part of the row.
+				headDots[0].parentElement?.scrollIntoView();
+			}
+		});
 		fetchBtn.title = 'Fetch' + (this.config.fetchAndPrune ? ' & Prune' : '') + ' from Remote(s)';
 		fetchBtn.innerHTML = SVG_ICONS.download;
 		fetchBtn.addEventListener('click', () => this.fetchFromRemotesAction());

web/styles/main.css

@@ -812,7 +812,7 @@ body.tagLabelsRightAligned .gitRef.tag{
 	max-width:40vw;
 }
 
-#findBtn, #terminalBtn, #settingsBtn, #fetchBtn, #refreshBtn{
+#headBtn, #findBtn, #terminalBtn, #settingsBtn, #fetchBtn, #refreshBtn{
 	position:absolute;
 	top:50%;
 	width:20px;
@@ -822,6 +822,9 @@ body.tagLabelsRightAligned .gitRef.tag{
 	-webkit-user-select:none;
 	user-select:none;
 }
+#headBtn{
+	right:130px;
+}
 #findBtn{
 	right:100px;
 }
@@ -841,7 +844,7 @@ body.tagLabelsRightAligned .gitRef.tag{
 #refreshBtn.refreshing{
 	cursor:default;
 }
-#findBtn svg, #terminalBtn svg, #settingsBtn svg, #fetchBtn svg, #refreshBtn svg{
+#headBtn svg, #findBtn svg, #terminalBtn svg, #settingsBtn svg, #fetchBtn svg, #refreshBtn svg{
 	position:absolute;
 	fill:var(--vscode-editor-foreground);
 	opacity:0.8;
@@ -852,14 +855,14 @@ body.tagLabelsRightAligned .gitRef.tag{
 #findBtn svg, #terminalBtn svg{
 	stroke-width:0.5px;
 }
-#findBtn:hover svg, #terminalBtn:hover svg, #settingsBtn:hover svg, #fetchBtn:hover svg, #refreshBtn:hover svg{
+#headBtn:hover svg, #findBtn:hover svg, #terminalBtn:hover svg, #settingsBtn:hover svg, #fetchBtn:hover svg, #refreshBtn:hover svg{
 	opacity:1;
 	stroke-width:0.5px;
 }
 #findBtn:hover svg, #terminalBtn:hover svg{
 	stroke-width:1px;
 }
-#findBtn svg, #terminalBtn svg, #settingsBtn svg, #fetchBtn svg{
+#headBtn svg, #findBtn svg, #terminalBtn svg, #settingsBtn svg, #fetchBtn svg{
 	left:1px;
 	top:1px;
 	width:18px !important;
@@ -882,6 +885,9 @@ body.tagLabelsRightAligned .gitRef.tag{
 #controls.fetchSupported{
 	padding-right:162px;
 }
+#controls.fetchSupported #headBtn{
+	right:160px;
+}
 #controls.fetchSupported #findBtn{
 	right:130px;
 }
@@ -1020,4 +1026,4 @@ label > input[type=radio]:checked ~ .customRadio:after{
 #commitGraph, #commitTable th, #commitTable td, .gitRef, #loadingHeader, .unselectable, .roundedBtn, #controls label{
 	-webkit-user-select:none;
 	user-select:none;
-}
+}