mhutchie · bendera · Oct 12, 2020 · Nov 4, 2020 · Nov 8, 2020 · Nov 8, 2020
@@ -493,6 +493,11 @@
 					},
 					"description": "An object specifying the default visibility of the Date, Author & Commit columns. Example: {\"Date\": true, \"Author\": true, \"Commit\": true}"
 				},
+				"git-graph.stickyHeader": {
+					"type": "boolean",
+					"default": true,
+					"description": "Keeps the header visible when the view is scrolled"
+				},
 				"git-graph.dialog.addTag.pushToRemote": {
 					"type": "boolean",
 					"default": false,

@@ -545,6 +545,13 @@ class Config {
 		return !!this.config.get('showStatusBarItem', true);
 	}
 
+	/**
+	 * Get the value of the `git-graph.stickyHeader` Extension Setting.
+	 */
+	get stickyHeader() {
+		return !!this.config.get('stickyHeader', true);
+	}
+
 	/**
 	 * Get the value of the `git-graph.tabIconColourTheme` Extension Setting.
 	 */

@@ -639,6 +639,7 @@ export class GitGraphView extends Disposable {
 				customPullRequestProviders: config.customPullRequestProviders,
 				dateFormat: config.dateFormat,
 				defaultColumnVisibility: config.defaultColumnVisibility,
+				stickyHeader: config.stickyHeader,
 				dialogDefaults: config.dialogDefaults,
 				enhancedAccessibility: config.enhancedAccessibility,
 				fetchAndPrune: config.fetchAndPrune,
@@ -681,9 +682,10 @@ export class GitGraphView extends Disposable {
 			<p class="unableToLoadMessage">${UNABLE_TO_FIND_GIT_MSG}</p>
 			</body>`;
 		} else if (numRepos > 0) {
+			const stickyClassAttr = initialState.config.stickyHeader ? ' class="sticky"' : '';
 			body = `<body>
 			<div id="view" tabindex="-1">
-				<div id="controls">
+				<div id="controls"${stickyClassAttr}>
 					<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>
@@ -698,8 +700,8 @@ export class GitGraphView extends Disposable {
 					<div id="commitTable"></div>
 				</div>
 				<div id="footer"></div>
+				<div id="scrollShadow"></div>
 			</div>
-			<div id="scrollShadow"></div>
 			<script nonce="${nonce}">var initialState = ${JSON.stringify(initialState)}, globalState = ${JSON.stringify(globalState)}, workspaceState = ${JSON.stringify(workspaceState)};</script>
 			<script nonce="${nonce}" src="${this.getMediaUri('out.min.js')}"></script>
 			</body>`;

@@ -260,6 +260,7 @@ export interface GitGraphViewConfig {
 	readonly showRemoteBranches: boolean;
 	readonly showStashes: boolean;
 	readonly showTags: boolean;
+	readonly stickyHeader: boolean;
 }
 
 export interface GitGraphViewGlobalState {

@@ -2845,6 +2845,8 @@ describe('Config', () => {
 
 	describe('showStatusBarItem', testBooleanExtensionSetting('showStatusBarItem', 'showStatusBarItem', true));
 
+	describe('stickyHeader', testBooleanExtensionSetting('stickyHeader', 'stickyHeader', true));
+
 	describe('tabIconColourTheme', () => {
 		it('Should return TabIconColourTheme.Colour when the configuration value is "colour"', () => {
 			// Setup

@@ -83,7 +83,7 @@ class ContextMenu {
 				? 2 - menuBounds.height // context menu fits above
 				: -2 - (menuBounds.height - (frameBounds.height - (event.pageY - frameBounds.top))); // Overlap the context menu vertically with the cursor
 		menu.style.left = (frameElem.scrollLeft + Math.max(event.pageX - frameBounds.left + relativeX, 2)) + 'px';
-		menu.style.top = (frameElem.scrollTop + Math.max(event.pageY - frameBounds.top + relativeY, 2)) + 'px';
+		menu.style.top = Math.max(event.clientY - frameBounds.top + relativeY, 2) + 'px';
 		menu.style.opacity = '1';
 		this.elem = menu;
 		this.onClose = onClose;

@@ -49,6 +49,7 @@ class GitGraphView {
 	private readonly viewElem: HTMLElement;
 	private readonly controlsElem: HTMLElement;
 	private readonly tableElem: HTMLElement;
+	private tableColHeadersElem: HTMLElement | null;
 	private readonly footerElem: HTMLElement;
 	private readonly showRemoteBranchesElem: HTMLInputElement;
 	private readonly refreshBtnElem: HTMLElement;
@@ -72,6 +73,7 @@ class GitGraphView {
 
 		this.controlsElem = document.getElementById('controls')!;
 		this.tableElem = document.getElementById('commitTable')!;
+		this.tableColHeadersElem = document.getElementById('tableColHeaders')!;
 		this.footerElem = document.getElementById('footer')!;
 		this.scrollShadowElem = <HTMLInputElement>document.getElementById('scrollShadow')!;
 
@@ -818,7 +820,8 @@ class GitGraphView {
 			markdown: this.config.markdown
 		});
 
-		let html = '<tr id="tableColHeaders"><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
+		const stickyClassAttr = this.config.stickyHeader ? ' class="sticky"' : '';
+		let html = '<tr id="tableColHeaders"' + stickyClassAttr + '><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
 			(colVisibility.date ? '<th class="tableColHeader dateCol" data-col="2">Date</th>' : '') +
 			(colVisibility.author ? '<th class="tableColHeader authorCol" data-col="3">Author</th>' : '') +
 			(colVisibility.commit ? '<th class="tableColHeader" data-col="4">Commit</th>' : '') +
@@ -920,6 +923,11 @@ class GitGraphView {
 				}
 			}
 		}
+
+		if (this.config.stickyHeader) {
+			this.tableColHeadersElem = document.getElementById('tableColHeaders');
+			this.alignTableHeaderToControls();
+		}
 	}
 
 	private renderUncommittedChanges() {
@@ -1881,6 +1889,22 @@ class GitGraphView {
 		this.requestLoadRepoInfoAndCommits(false, true);
 	}
 
+	private alignTableHeaderToControls() {
+		if (!this.tableColHeadersElem) {
+			return;
+		}
+
+		const controlsHeight = this.controlsElem.offsetHeight;
+		const controlsWidth = this.controlsElem.offsetWidth;
+		const tableColHeadersHeight = this.tableColHeadersElem.offsetHeight;
+		const bottomBorderWidth = 1;
+		const shadowYPos = controlsHeight + tableColHeadersHeight + bottomBorderWidth;
+
+		this.tableColHeadersElem.style.top = `${controlsHeight}px`;
+		this.scrollShadowElem.style.top = `${shadowYPos}px`;
+		this.scrollShadowElem.style.width = `${controlsWidth}px`;
+	}
+
 
 	/* Observers */
 
@@ -1893,6 +1917,10 @@ class GitGraphView {
 				windowWidth = window.outerWidth;
 				windowHeight = window.outerHeight;
 			}
+
+			if (this.config.stickyHeader) {
+				this.alignTableHeaderToControls();
+			}
 		});
 	}
 

@@ -1,13 +1,13 @@
 .contextMenu{
 	display:block;
-	position:absolute;
+	position:fixed;
 	background-color:var(--vscode-menu-background);
 	box-shadow:0 1px 4px 1px var(--vscode-widget-shadow);
 	color:var(--vscode-menu-foreground);
 	list-style-type:none;
 	margin:0;
 	padding:4px 0;
-	z-index:10;
+	z-index:13;
 	-webkit-user-select:none;
 	user-select:none;
 }

@@ -74,9 +74,10 @@ code{
 	top:0;
 	left:0;
 	right:0;
-	height:0;
-	box-shadow:0 -6px 6px 6px var(--vscode-scrollbar-shadow);
-	z-index:20;
+	height:6px;
+	box-shadow: inset 0 6px 6px -6px var(--vscode-scrollbar-shadow);
+	z-index:11;
+	pointer-events:none;
 }
 
 
@@ -214,7 +215,8 @@ code{
 	padding:0 4px;
 }
 #commitTable th{
-	border-bottom:1px solid rgba(128,128,128,0.5);
+	border-bottom:1px solid transparent;
+	box-shadow: 0 1px 0 rgba(128,128,128,0.5);
 	line-height:18px;
 	padding:6px 12px;
 }
@@ -277,6 +279,12 @@ code{
 .tableColHeader{
 	position:relative;
 }
+#tableColHeaders.sticky .tableColHeader {
+	position: sticky;
+	top: inherit;
+	z-index: 11;
+	background-color: var(--vscode-editor-background);
+}
 .resizeCol{
 	position:absolute;
 	top:0;
@@ -776,11 +784,12 @@ body.tagLabelsRightAligned .gitRef.tag{
 
 #controls{
 	display:block;
-	position:relative;
+	position: relative;
 	left:0;
 	right:0;
 	top:0;
 	padding:4px 132px 4px 0;
+	background-color: var(--vscode-editor-background);
 	border-bottom:1px solid rgba(128,128,128,0.5);
 	line-height:32px;
 	text-align:center;
@@ -790,6 +799,11 @@ body.tagLabelsRightAligned .gitRef.tag{
 	user-select:none;
 }
 
+#controls.sticky {
+	position:sticky;
+	z-index:12;
+}
+
 #repoControl, #branchControl, #showRemoteBranchesControl{
 	display:inline-block;
 	white-space:nowrap;