Closes #297 - adds heatmap to scroll bar

CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+- Adds ability to show gutter heatmap in the gutter and/or on the scroll bar — closes [#297](https://github.com/eamodio/vscode-gitlens/issues/297)
+  - Adds `gitlens.heatmap.locations` setting to specify where the indicators of the gutter heatmap annotations will be shown
 - Adds a `gitlens.fileAnnotations.command` setting to specify whether the file annotations button in the editor title shows a menu or immediately toggles the specified file annotations — closes [#1165](https://github.com/eamodio/vscode-gitlens/issues/1165) thanks to [PR #1171](https://github.com/eamodio/vscode-gitlens/pull/1171) by Raaj Patil ([@arrpee](https://github.com/arrpee))
   - Adds this new option to the _Menus & Toolbars_ section of the GitLens Interactive Settings
 

README.md

@@ -836,6 +836,7 @@ See also [View Settings](#view-settings- 'Jump to the View settings')
 | `gitlens.heatmap.ageThreshold` | Specifies the age of the most recent change (in days) after which the gutter heatmap annotations will be cold rather than hot (i.e. will use `gitlens.heatmap.coldColor` instead of `gitlens.heatmap.hotColor`) |
 | `gitlens.heatmap.coldColor`    | Specifies the base color of the gutter heatmap annotations when the most recent change is older (cold) than the `gitlens.heatmap.ageThreshold` value                                                            |
 | `gitlens.heatmap.hotColor`     | Specifies the base color of the gutter heatmap annotations when the most recent change is newer (hot) than the `gitlens.heatmap.ageThreshold` value                                                             |
+| `gitlens.heatmap.locations`    | Specifies where the indicators of the gutter heatmap annotations will be shown<br /><br />`gutter` - adds a gutter indicator<br />`overview` - adds a decoration to the overview ruler (scroll bar)             |
 | `gitlens.heatmap.toggleMode`   | Specifies how the gutter heatmap annotations will be toggled<br /><br />`file` - toggles each file individually<br />`window` - toggles the window, i.e. all files at once                                      |
 
 ## Git Command Palette Settings [#](#git-command-palette-settings- 'Git Command Palette Settings')

package.json

@@ -355,7 +355,7 @@
 						]
 					},
 					"minItems": 1,
-					"maxItems": 3,
+					"maxItems": 2,
 					"uniqueItems": true,
 					"markdownDescription": "Specifies where the indicators of the gutter changes annotations will be shown",
 					"scope": "window"
@@ -749,6 +749,29 @@
 					"markdownDescription": "Specifies the base color of the gutter heatmap annotations when the most recent change is newer (hot) than the `#gitlens.heatmap.ageThreshold#` value",
 					"scope": "window"
 				},
+				"gitlens.heatmap.locations": {
+					"type": "array",
+					"default": [
+						"gutter",
+						"overview"
+					],
+					"items": {
+						"type": "string",
+						"enum": [
+							"gutter",
+							"overview"
+						],
+						"enumDescriptions": [
+							"Adds a gutter indicator",
+							"Adds a decoration to the overview ruler (scroll bar)"
+						]
+					},
+					"minItems": 1,
+					"maxItems": 2,
+					"uniqueItems": true,
+					"markdownDescription": "Specifies where the indicators of the gutter heatmap annotations will be shown",
+					"scope": "window"
+				},
 				"gitlens.heatmap.toggleMode": {
 					"type": "string",
 					"default": "file",

src/annotations/annotations.ts

@@ -2,6 +2,7 @@
 import {
 	DecorationInstanceRenderOptions,
 	DecorationOptions,
+	OverviewRulerLane,
 	Range,
 	TextEditorDecorationType,
 	ThemableDecorationAttachmentRenderOptions,
@@ -10,7 +11,8 @@ import {
 	Uri,
 	window,
 } from 'vscode';
-import { configuration } from '../configuration';
+import { HeatmapLocations } from '../config';
+import { Config, configuration } from '../configuration';
 import { GlyphChars } from '../constants';
 import { Container } from '../container';
 import { CommitFormatOptions, CommitFormatter, GitCommit } from '../git/git';
@@ -23,11 +25,6 @@ export interface ComputedHeatmap {
 	computeRelativeAge(date: Date): number;
 }
 
-interface HeatmapConfig {
-	enabled: boolean;
-	location?: 'left' | 'right';
-}
-
 interface RenderOptions
 	extends DecorationInstanceRenderOptions,
 		ThemableDecorationRenderOptions,
@@ -113,17 +110,25 @@ export class Annotations {
 	) {
 		const [r, g, b, a] = this.getHeatmapColor(date, heatmap);
 
+		const { locations } = Container.config.heatmap;
+		const gutter = locations.includes(HeatmapLocations.Gutter);
+		const overview = locations.includes(HeatmapLocations.Overview);
+
 		const key = `${r},${g},${b},${a}`;
 		let colorDecoration = map.get(key);
 		if (colorDecoration == null) {
 			colorDecoration = {
 				decorationType: window.createTextEditorDecorationType({
-					gutterIconPath: Uri.parse(
-						`data:image/svg+xml,${encodeURIComponent(
-							`<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect fill='rgb(${r},${g},${b})' fill-opacity='${a}' x='7' y='0' width='2' height='18'/></svg>`,
-						)}`,
-					),
-					gutterIconSize: 'contain',
+					gutterIconPath: gutter
+						? Uri.parse(
+								`data:image/svg+xml,${encodeURIComponent(
+									`<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect fill='rgb(${r},${g},${b})' fill-opacity='${a}' x='7' y='0' width='2' height='18'/></svg>`,
+								)}`,
+						  )
+						: undefined,
+					gutterIconSize: gutter ? 'contain' : undefined,
+					overviewRulerLane: overview ? OverviewRulerLane.Center : undefined,
+					overviewRulerColor: overview ? `rgba(${r},${g},${b},${a})` : undefined,
 				}),
 				rangesOrOptions: [range],
 			};
@@ -159,7 +164,7 @@ export class Annotations {
 
 	static gutterRenderOptions(
 		separateLines: boolean,
-		heatmap: HeatmapConfig,
+		heatmap: Config['blame']['heatmap'],
 		avatars: boolean,
 		format: string,
 		options: CommitFormatOptions,

src/config.ts

@@ -63,6 +63,7 @@ export interface Config {
 		ageThreshold: number;
 		coldColor: string;
 		hotColor: string;
+		locations: HeatmapLocations[];
 		toggleMode: AnnotationsToggleMode;
 	};
 	hovers: {
@@ -215,6 +216,11 @@ export enum GravatarDefaultStyle {
 	Robot = 'robohash',
 }
 
+export enum HeatmapLocations {
+	Gutter = 'gutter',
+	Overview = 'overview',
+}
+
 export enum KeyMap {
 	Alternate = 'alternate',
 	Chorded = 'chorded',

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

@@ -58,6 +58,36 @@
 					</div>
 				</div>
 
+				<div class="settings">
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="heatmap.locations"
+								name="heatmap.locations"
+								type="checkbox"
+								value="gutter"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="heatmap.locations">Add gutter indicator</label>
+						</div>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="heatmap.locations-1"
+								name="heatmap.locations"
+								type="checkbox"
+								value="overview"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="heatmap.locations-1">Add scroll bar indicator</label>
+						</div>
+					</div>
+				</div>
+
 				<div class="setting">
 					<div class="setting__input">
 						<label for="heatmap.ageThreshold">Hot/cold threshold </label>
@@ -76,6 +106,16 @@
 
 			<div class="section__preview">
 				<img class="image__preview" src="#{root}/images/settings/heatmap.webp" />
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/heatmap-gutter.webp"
+					data-visibility="heatmap.locations +gutter"
+				/>
+				<img
+					class="image__preview--overlay hidden"
+					src="#{root}/images/settings/heatmap-scrollbar.webp"
+					data-visibility="heatmap.locations +overview"
+				/>
 			</div>
 		</div>