Adds `line` option to heatmap & changes annotations

Adds line fading option to heatmap annotation

CHANGELOG.md

@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## Added
 
+- Adds a `line` option to `gitlens.heatmap.locations` setting to specify whether to add a line highlight to the _File Heatmap_ annotations
+- Adds a `gitlens.heatmap.fadeLines` setting to specify whether to fade out older lines when showing the _File Heatmap_ annotations
+- Adds a `line` option to `gitlens.changes.locations` setting to specify whether to add a line highlight to the _File Changes_ annotations
 - Adds "vanilla" [Gerrit](https://www.gerritcodereview.com/) remote provider support — closes [#1953](https://github.com/gitkraken/vscode-gitlens/issues/1953) thanks to [PR #1954](https://github.com/gitkraken/vscode-gitlens/pull/1954) by Felipe Santos ([@felipecrs](https://github.com/felipecrs))
 
 ## Changed

README.md

@@ -954,27 +954,27 @@ See also [View Settings](#view-settings- 'Jump to the View settings')
 | `gitlens.blame.heatmap.enabled`     | Specifies whether to provide a heatmap indicator in the gutter blame annotations                                                                                                                                                                                             |
 | `gitlens.blame.heatmap.location`    | Specifies where the heatmap indicators will be shown in the gutter blame annotations<br /><br />`left` - adds a heatmap indicator on the left edge of the gutter blame annotations<br />`right` - adds a heatmap indicator on the right edge of the gutter blame annotations |
 | `gitlens.blame.highlight.enabled`   | Specifies whether to highlight lines associated with the current line                                                                                                                                                                                                        |
-| `gitlens.blame.highlight.locations` | Specifies where the associated line highlights will be shown<br /><br />`gutter` - adds a gutter indicator<br />`line` - adds a full-line highlight background color<br />`overview` - adds a decoration to the overview ruler (scroll bar)                                  |
+| `gitlens.blame.highlight.locations` | Specifies where the associated line highlights will be shown<br /><br />`gutter` - adds a gutter indicator<br />`line` - adds a full-line highlight background color<br />`overview` - adds an indicator to the scroll bar                                                   |
 | `gitlens.blame.ignoreWhitespace`    | Specifies whether to ignore whitespace when comparing revisions during blame operations                                                                                                                                                                                      |
 | `gitlens.blame.separateLines`       | Specifies whether gutter blame annotations will have line separators                                                                                                                                                                                                         |
 | `gitlens.blame.toggleMode`          | Specifies how the gutter blame annotations will be toggled<br /><br />`file` - toggles each file individually<br />`window` - toggles the window, i.e. all files at once                                                                                                     |
 
 ## Gutter Changes Settings [#](#gutter-changes-settings- 'Gutter Changes Settings')
 
-| Name                         | Description                                                                                                                                                                                         |
-| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `gitlens.changes.locations`  | Specifies where the indicators of the gutter changes annotations will be shown<br /><br />`gutter` - adds a gutter indicator<br />`overview` - adds a decoration to the overview ruler (scroll bar) |
-| `gitlens.changes.toggleMode` | Specifies how the gutter changes annotations will be toggled<br /><br />`file` - toggles each file individually<br />`window` - toggles the window, i.e. all files at once                          |
+| Name                         | Description                                                                                                                                                                                                                                  |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gitlens.changes.locations`  | Specifies where the indicators of the gutter changes annotations will be shown<br /><br />`gutter` - adds a gutter indicator<br />`line` - adds a full-line highlight background color<br />`overview` - adds an indicator to the scroll bar |
+| `gitlens.changes.toggleMode` | Specifies how the gutter changes annotations will be toggled<br /><br />`file` - toggles each file individually<br />`window` - toggles the window, i.e. all files at once                                                                   |
 
 ## Gutter Heatmap Settings [#](#gutter-heatmap-settings- 'Gutter Heatmap Settings')
 
-| Name                           | Description                                                                                                                                                                                                     |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `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                                      |
+| Name                           | Description                                                                                                                                                                                                                                  |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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 />`line` - adds a full-line highlight background color<br />`overview` - adds an indicator to the 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')
 
@@ -1077,15 +1077,15 @@ See also [View Settings](#view-settings- 'Jump to the View settings')
 
 GitLens defines a set of themable colors which can be provided by vscode themes or directly by the user using [`workbench.colorCustomizations`](https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme).
 
-| Name                                       | Description                                                                               |
-| ------------------------------------------ | ----------------------------------------------------------------------------------------- |
-| `gitlens.gutterBackgroundColor`            | Specifies the background color of the gutter blame annotations                            |
-| `gitlens.gutterForegroundColor`            | Specifies the foreground color of the gutter blame annotations                            |
-| `gitlens.gutterUncommittedForegroundColor` | Specifies the foreground color of an uncommitted line in the gutter blame annotations     |
-| `gitlens.trailingLineBackgroundColor`      | Specifies the background color of the trailing blame annotation                           |
-| `gitlens.trailingLineForegroundColor`      | Specifies the foreground color of the trailing blame annotation                           |
-| `gitlens.lineHighlightBackgroundColor`     | Specifies the background color of the associated line highlights in blame annotations     |
-| `gitlens.lineHighlightOverviewRulerColor`  | Specifies the overview ruler color of the associated line highlights in blame annotations |
+| Name                                       | Description                                                                           |
+| ------------------------------------------ | ------------------------------------------------------------------------------------- |
+| `gitlens.gutterBackgroundColor`            | Specifies the background color of the gutter blame annotations                        |
+| `gitlens.gutterForegroundColor`            | Specifies the foreground color of the gutter blame annotations                        |
+| `gitlens.gutterUncommittedForegroundColor` | Specifies the foreground color of an uncommitted line in the gutter blame annotations |
+| `gitlens.trailingLineBackgroundColor`      | Specifies the background color of the trailing blame annotation                       |
+| `gitlens.trailingLineForegroundColor`      | Specifies the foreground color of the trailing blame annotation                       |
+| `gitlens.lineHighlightBackgroundColor`     | Specifies the background color of the associated line highlights in blame annotations |
+| `gitlens.lineHighlightOverviewRulerColor`  | Specifies the scroll bar color of the associated line highlights in blame annotations |
 
 # Contributors &#x1F64F;&#x2764;
 

package.json

@@ -1909,7 +1909,7 @@
 							"enumDescriptions": [
 								"Adds a gutter indicator",
 								"Adds a full-line highlight background color",
-								"Adds a decoration to the overview ruler (scroll bar)"
+								"Adds an indicator to the scroll bar"
 							]
 						},
 						"minItems": 1,
@@ -1962,17 +1962,20 @@
 						"type": "array",
 						"default": [
 							"gutter",
+							"line",
 							"overview"
 						],
 						"items": {
 							"type": "string",
 							"enum": [
 								"gutter",
+								"line",
 								"overview"
 							],
 							"enumDescriptions": [
 								"Adds a gutter indicator",
-								"Adds a decoration to the overview ruler (scroll bar)"
+								"Adds a full-line highlight background color",
+								"Adds an indicator to the scroll bar"
 							]
 						},
 						"minItems": 1,
@@ -2008,17 +2011,20 @@
 						"type": "array",
 						"default": [
 							"gutter",
+							"line",
 							"overview"
 						],
 						"items": {
 							"type": "string",
 							"enum": [
 								"gutter",
+								"line",
 								"overview"
 							],
 							"enumDescriptions": [
 								"Adds a gutter indicator",
-								"Adds a decoration to the overview ruler (scroll bar)"
+								"Adds a full-line highlight background color",
+								"Adds an indicator to the scroll bar"
 							]
 						},
 						"minItems": 1,
@@ -2028,6 +2034,13 @@
 						"scope": "window",
 						"order": 20
 					},
+					"gitlens.heatmap.fadeLines": {
+						"type": "boolean",
+						"default": true,
+						"markdownDescription": "Specifies the whether to fade out older lines",
+						"scope": "window",
+						"order": 21
+					},
 					"gitlens.heatmap.ageThreshold": {
 						"type": "number",
 						"default": 90,
@@ -3441,7 +3454,7 @@
 			},
 			{
 				"id": "gitlens.lineHighlightOverviewRulerColor",
-				"description": "Specifies the overview ruler color of the associated line highlights in blame annotations",
+				"description": "Specifies the scroll bar color of the associated line highlights in blame annotations",
 				"defaults": {
 					"dark": "#00BCF299",
 					"light": "#00BCF299",

src/annotations/annotations.ts

@@ -23,6 +23,7 @@ export interface ComputedHeatmap {
 	coldThresholdTimestamp: number;
 	colors: { hot: string[]; cold: string[] };
 	computeRelativeAge(date: Date): number;
+	computeOpacity(date: Date): number;
 }
 
 interface RenderOptions
@@ -110,15 +111,19 @@ export class Annotations {
 	) {
 		const [r, g, b, a] = this.getHeatmapColor(date, heatmap);
 
-		const { locations } = Container.instance.config.heatmap;
+		const { fadeLines, locations } = Container.instance.config.heatmap;
 		const gutter = locations.includes(HeatmapLocations.Gutter);
-		const overview = locations.includes(HeatmapLocations.Overview);
+		const line = locations.includes(HeatmapLocations.Line);
+		const scrollbar = locations.includes(HeatmapLocations.Scrollbar);
 
 		const key = `${r},${g},${b},${a}`;
 		let colorDecoration = map.get(key);
 		if (colorDecoration == null) {
 			colorDecoration = {
 				decorationType: window.createTextEditorDecorationType({
+					backgroundColor: line ? `rgba(${r},${g},${b},${a * 0.08})` : undefined,
+					opacity: fadeLines ? `${heatmap.computeOpacity(date).toFixed(2)} !important` : undefined,
+					isWholeLine: line || fadeLines ? true : undefined,
 					gutterIconPath: gutter
 						? Uri.parse(
 								`data:image/svg+xml,${encodeURIComponent(
@@ -127,8 +132,8 @@ export class Annotations {
 						  )
 						: undefined,
 					gutterIconSize: gutter ? 'contain' : undefined,
-					overviewRulerLane: overview ? OverviewRulerLane.Center : undefined,
-					overviewRulerColor: overview ? `rgba(${r},${g},${b},${a})` : undefined,
+					overviewRulerLane: scrollbar ? OverviewRulerLane.Center : undefined,
+					overviewRulerColor: scrollbar ? `rgba(${r},${g},${b},${a * 0.5})` : undefined,
 				}),
 				rangesOrOptions: [range],
 			};

src/annotations/blameAnnotationProvider.ts

@@ -98,24 +98,33 @@ export abstract class BlameAnnotationProviderBase extends AnnotationProviderBase
 			lookupTable = getRelativeAgeLookupTable(dates);
 		}
 
+		const getLookupTable = (date: Date) =>
+			Array.isArray(lookupTable)
+				? lookupTable
+				: date.getTime() < coldThresholdTimestamp
+				? lookupTable.cold
+				: lookupTable.hot;
+
+		const computeRelativeAge = (date: Date, lookup: number[]) => {
+			const time = date.getTime();
+			let index = 0;
+			for (let i = 0; i < lookup.length; i++) {
+				index = i;
+				if (time >= lookup[i]) break;
+			}
+
+			return index;
+		};
+
 		return {
 			coldThresholdTimestamp: coldThresholdTimestamp,
 			colors: await getHeatmapColors(),
-			computeRelativeAge: (date: Date) => {
-				const lookup = Array.isArray(lookupTable)
-					? lookupTable
-					: date.getTime() < coldThresholdTimestamp
-					? lookupTable.cold
-					: lookupTable.hot;
-
-				const time = date.getTime();
-				let index = 0;
-				for (let i = 0; i < lookup.length; i++) {
-					index = i;
-					if (time >= lookup[i]) break;
-				}
-
-				return index;
+			computeRelativeAge: (date: Date) => computeRelativeAge(date, getLookupTable(date)),
+			computeOpacity: (date: Date) => {
+				const lookup = getLookupTable(date);
+				const age = computeRelativeAge(date, lookup);
+
+				return Math.max(0.2, Math.round((1 - age / lookup.length) * 100) / 100);
 			},
 		};
 	}

src/annotations/fileAnnotationController.ts

@@ -546,54 +546,67 @@ export class FileAnnotationController implements Disposable {
 
 		const { locations } = this.container.config.changes;
 
-		let addedColor;
-		let changedColor;
-		let deletedColor;
+		type RGB = [number, number, number];
+		let addedColor: RGB;
+		let changedColor: RGB;
+		let deletedColor: RGB;
 
 		switch (window.activeColorTheme.kind) {
 			case ColorThemeKind.Light:
-				addedColor = '#48985D';
-				changedColor = '#2090D3';
-				deletedColor = '#E51400';
+				addedColor = /* #48985D */ [72, 152, 93];
+				changedColor = /* #2090D3 */ [32, 144, 211];
+				deletedColor = /* #E51400 */ [229, 20, 0];
 				break;
 			case ColorThemeKind.HighContrast:
-				addedColor = '#487E02';
-				changedColor = '#1B81A8';
-				deletedColor = '#F14C4C';
+				addedColor = /* #487E02 */ [72, 126, 2];
+				changedColor = /* #1B81A8 */ [27, 129, 168];
+				deletedColor = /* #F14C4C */ [241, 76, 76];
 				break;
 			default:
-				addedColor = '#487E02';
-				changedColor = '#1B81A8';
-				deletedColor = '#F14C4C';
+				addedColor = /* #487E02 */ [72, 126, 2];
+				changedColor = /* #1B81A8 */ [27, 129, 168];
+				deletedColor = /* #F14C4C */ [241, 76, 76];
 				break;
 		}
 
 		Decorations.changesLineAddedAnnotation = window.createTextEditorDecorationType({
+			backgroundColor: locations.includes(ChangesLocations.Line)
+				? `rgba(${addedColor.join(',')},0.2)`
+				: undefined,
+			isWholeLine: locations.includes(ChangesLocations.Line) ? true : undefined,
 			gutterIconPath: locations.includes(ChangesLocations.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='${addedColor}' x='13' y='0' width='3' height='18'/></svg>`,
+							`<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect fill='rgb(${addedColor.join(
+								',',
+							)})' x='13' y='0' width='3' height='18'/></svg>`,
 						)}`,
 				  )
 				: undefined,
 			gutterIconSize: 'contain',
 			overviewRulerLane: OverviewRulerLane.Left,
-			overviewRulerColor: locations.includes(ChangesLocations.Overview)
+			overviewRulerColor: locations.includes(ChangesLocations.Scrollbar)
 				? new ThemeColor('editorOverviewRuler.addedForeground')
 				: undefined,
 		});
 
 		Decorations.changesLineChangedAnnotation = window.createTextEditorDecorationType({
+			backgroundColor: locations.includes(ChangesLocations.Line)
+				? `rgba(${changedColor.join(',')},0.2)`
+				: undefined,
+			isWholeLine: locations.includes(ChangesLocations.Line) ? true : undefined,
 			gutterIconPath: locations.includes(ChangesLocations.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='${changedColor}' x='13' y='0' width='3' height='18'/></svg>`,
+							`<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect fill='rgb(${changedColor.join(
+								',',
+							)})' x='13' y='0' width='3' height='18'/></svg>`,
 						)}`,
 				  )
 				: undefined,
 			gutterIconSize: 'contain',
 			overviewRulerLane: OverviewRulerLane.Left,
-			overviewRulerColor: locations.includes(ChangesLocations.Overview)
+			overviewRulerColor: locations.includes(ChangesLocations.Scrollbar)
 				? new ThemeColor('editorOverviewRuler.modifiedForeground')
 				: undefined,
 		});
@@ -602,13 +615,15 @@ export class FileAnnotationController implements Disposable {
 			gutterIconPath: locations.includes(ChangesLocations.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'><polygon fill='${deletedColor}' points='13,10 13,18 17,14'/></svg>`,
+							`<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><polygon fill='rgb(${deletedColor.join(
+								',',
+							)})' points='13,10 13,18 17,14'/></svg>`,
 						)}`,
 				  )
 				: undefined,
 			gutterIconSize: 'contain',
 			overviewRulerLane: OverviewRulerLane.Left,
-			overviewRulerColor: locations.includes(ChangesLocations.Overview)
+			overviewRulerColor: locations.includes(ChangesLocations.Scrollbar)
 				? new ThemeColor('editorOverviewRuler.deletedForeground')
 				: undefined,
 		});
@@ -641,7 +656,7 @@ export class FileAnnotationController implements Disposable {
 				backgroundColor: locations.includes(BlameHighlightLocations.Line)
 					? new ThemeColor(Colors.LineHighlightBackgroundColor)
 					: undefined,
-				overviewRulerColor: locations.includes(BlameHighlightLocations.Overview)
+				overviewRulerColor: locations.includes(BlameHighlightLocations.Scrollbar)
 					? new ThemeColor(Colors.LineHighlightOverviewRulerColor)
 					: undefined,
 			});

src/config.ts

@@ -60,6 +60,7 @@ export interface Config {
 		ageThreshold: number;
 		coldColor: string;
 		hotColor: string;
+		fadeLines: boolean;
 		locations: HeatmapLocations[];
 		toggleMode: AnnotationsToggleMode;
 	};
@@ -180,7 +181,7 @@ export interface AutolinkReference {
 export const enum BlameHighlightLocations {
 	Gutter = 'gutter',
 	Line = 'line',
-	Overview = 'overview',
+	Scrollbar = 'overview',
 }
 
 export const enum BranchSorting {
@@ -192,7 +193,8 @@ export const enum BranchSorting {
 
 export const enum ChangesLocations {
 	Gutter = 'gutter',
-	Overview = 'overview',
+	Line = 'line',
+	Scrollbar = 'overview',
 }
 
 export const enum CodeLensCommand {
@@ -272,7 +274,8 @@ export const enum GravatarDefaultStyle {
 
 export const enum HeatmapLocations {
 	Gutter = 'gutter',
-	Overview = 'overview',
+	Line = 'line',
+	Scrollbar = 'overview',
 }
 
 export const enum KeyMap {

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

@@ -74,11 +74,25 @@
 								id="changes.locations-1"
 								name="changes.locations"
 								type="checkbox"
+								value="line"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="changes.locations-1">Add line highlight</label>
+						</div>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="changes.locations-2"
+								name="changes.locations"
+								type="checkbox"
 								value="overview"
 								data-setting
 								data-setting-type="array"
 							/>
-							<label for="changes.locations-1">Add scroll bar indicator</label>
+							<label for="changes.locations-2">Add scroll bar indicator</label>
 						</div>
 					</div>
 				</div>

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

@@ -79,17 +79,38 @@
 								id="heatmap.locations-1"
 								name="heatmap.locations"
 								type="checkbox"
+								value="line"
+								data-setting
+								data-setting-type="array"
+							/>
+							<label for="heatmap.locations-1">Add line highlight</label>
+						</div>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
+							<input
+								id="heatmap.locations-2"
+								name="heatmap.locations"
+								type="checkbox"
 								value="overview"
 								data-setting
 								data-setting-type="array"
 							/>
-							<label for="heatmap.locations-1">Add scroll bar indicator</label>
+							<label for="heatmap.locations-2">Add scroll bar indicator</label>
 						</div>
 					</div>
 				</div>
 
 				<div class="setting">
 					<div class="setting__input">
+						<input id="heatmap.fadeLines" name="heatmap.fadeLines" type="checkbox" data-setting />
+						<label for="heatmap.fadeLines">Fade out older lines</label>
+					</div>
+				</div>
+
+				<div class="setting">
+					<div class="setting__input">
 						<label for="heatmap.ageThreshold">Hot/cold threshold </label>
 						<input
 							id="heatmap.ageThreshold"