Merge PR mhutchie#763 (Show HEAD Button): Resolve conflicts and fix tests

Author: AngelAlexQC

CHANGELOG.md

@@ -7,6 +7,7 @@
 * #910 Display GPG signature status for commits (verified/unverified) in the graph.
 * #394 New "Sticky Scroll" option for the Commit Graph.
 * #473 Display CI/CD Status (e.g. GitHub Actions) in the graph.
+* #763 New "Show HEAD" button in the controls bar to scroll to the HEAD commit.
 
 ### Español
 * #602 Nueva acción "Copiar Hash del Commit al Portapapeles".
@@ -15,6 +16,7 @@
 * #910 Muestra el estado de la firma GPG de los commits (verificado/no verificado) en el gráfico.
 * #394 Nueva opción de "Desplazamiento Pegajoso" para el Gráfico de Commits.
 * #473 Muestra el estado de CI/CD (por ejemplo, GitHub Actions) en el gráfico.
+* #763 Nuevo botón "Mostrar HEAD" en la barra de controles para desplazarse al commit HEAD.
 
 ## 1.30.0 - 2021-04-05
 * #395 Added a "Force Fetch" option onto the "Fetch into Local Branch" Dialog, allowing any local branch (that's not checked out) to be reset to the remote branch. This dialog is accessed via the Remote Branch Context Menu.

src/gitGraphView.ts

@@ -741,6 +741,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>

tests/gitGraphView.test.ts

@@ -2176,7 +2176,8 @@ describe('GitGraphView', () => {
 						heads: ['master'],
 						tags: [],
 						remotes: [{ name: 'origin/master', remote: 'origin' }],
-						stash: null
+						stash: null,
+						signature: null
 					}
 				],
 				head: '1a2b3c4d5e6f1a2b3c4d5e6f1a2b3c4d5e6f1a2b',

web/main.ts

@@ -149,7 +149,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

@@ -875,7 +875,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;
@@ -885,6 +885,9 @@ body.tagLabelsRightAligned .gitRef.tag{
 	-webkit-user-select:none;
 	user-select:none;
 }
+#headBtn{
+	right:130px;
+}
 #findBtn{
 	right:100px;
 }
@@ -904,7 +907,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;
@@ -915,14 +918,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;
@@ -945,6 +948,9 @@ body.tagLabelsRightAligned .gitRef.tag{
 #controls.fetchSupported{
 	padding-right:162px;
 }
+#controls.fetchSupported #headBtn{
+	right:160px;
+}
 #controls.fetchSupported #findBtn{
 	right:130px;
 }
@@ -1084,6 +1090,7 @@ label > input[type=radio]:checked ~ .customRadio:after{
 	-webkit-user-select:none;
 	user-select:none;
 }
+<<<<<<< HEAD
 
 /* cicdTooltip */