Fixes #314 - Toggle line annotation doesn't work

CHANGELOG.md

@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Added
 - Adds `${agoOrDate}` and `${authorAgoOrDate}` tokens to `gitlens.blame.format`, `gitlens.currentLine.format`, `gitlens.explorers.commitFormat`, `gitlens.explorers.stashFormat`, and `gitlens.statusBar.format` settings which will honor the `gitlens.defaultDateStyle` setting — closes [#312](https://github.com/eamodio/vscode-gitlens/issues/312)
 
+### Fixed
+- Fixes [#314](https://github.com/eamodio/vscode-gitlens/issues/314) - Toggle line annotation doesn't work properly
+
 ## [8.1.1] - 2018-03-12
 ### Fixed
 - Fixes [#276](https://github.com/eamodio/vscode-gitlens/issues/276) - Lookup for branches without upstreams fails

src/annotations/annotationController.ts

@@ -5,7 +5,7 @@ import { AnnotationProviderBase, AnnotationStatus, TextEditorCorrelationKey } fr
 import { AnnotationsToggleMode, configuration, FileAnnotationType, HighlightLocations } from '../configuration';
 import { CommandContext, isTextEditor, setCommandContext } from '../constants';
 import { Container } from '../container';
-import { DocumentBlameStateChangeEvent, DocumentDirtyStateChangeEvent, GitDocumentState } from '../trackers/documentTracker';
+import { DocumentBlameStateChangeEvent, DocumentDirtyStateChangeEvent, GitDocumentState } from '../trackers/gitDocumentTracker';
 import { GutterBlameAnnotationProvider } from './gutterBlameAnnotationProvider';
 import { HeatmapBlameAnnotationProvider } from './heatmapBlameAnnotationProvider';
 import { KeyboardScope, KeyCommand, Keys } from '../keyboard';

src/annotations/annotationProvider.ts

@@ -4,7 +4,7 @@ import { DecorationOptions, Disposable, Range, TextDocument, TextEditor, TextEdi
 import { FileAnnotationType } from '../configuration';
 import { TextDocumentComparer } from '../comparers';
 import { CommandContext, setCommandContext } from '../constants';
-import { GitDocumentState, TrackedDocument } from '../trackers/documentTracker';
+import { GitDocumentState, TrackedDocument } from '../trackers/gitDocumentTracker';
 
 export enum AnnotationStatus {
     Computing = 'computing',

src/annotations/blameAnnotationProvider.ts

@@ -5,7 +5,7 @@ import { AnnotationProviderBase } from './annotationProvider';
 import { Annotations } from './annotations';
 import { RangeEndOfLineIndex } from '../constants';
 import { Container } from '../container';
-import { GitDocumentState, TrackedDocument } from '../trackers/documentTracker';
+import { GitDocumentState, TrackedDocument } from '../trackers/gitDocumentTracker';
 import { GitBlame, GitCommit, GitUri } from '../gitService';
 
 export abstract class BlameAnnotationProviderBase extends AnnotationProviderBase {

src/annotations/recentChangesAnnotationProvider.ts

@@ -5,7 +5,7 @@ import { Annotations } from './annotations';
 import { FileAnnotationType } from './../configuration';
 import { RangeEndOfLineIndex } from '../constants';
 import { Container } from '../container';
-import { GitDocumentState, TrackedDocument } from '../trackers/documentTracker';
+import { GitDocumentState, TrackedDocument } from '../trackers/gitDocumentTracker';
 import { GitUri } from '../gitService';
 import { Logger } from '../logger';
 

src/codeLensController.ts

@@ -3,7 +3,7 @@ import { ConfigurationChangeEvent, Disposable, languages } from 'vscode';
 import { configuration, ICodeLensConfig } from './configuration';
 import { CommandContext, setCommandContext } from './constants';
 import { Container } from './container';
-import { DocumentBlameStateChangeEvent, DocumentDirtyIdleTriggerEvent, GitDocumentState } from './trackers/documentTracker';
+import { DocumentBlameStateChangeEvent, DocumentDirtyIdleTriggerEvent, GitDocumentState } from './trackers/gitDocumentTracker';
 import { GitCodeLensProvider } from './gitCodeLensProvider';
 import { Logger } from './logger';
 

src/container.ts

@@ -4,10 +4,11 @@ import { AnnotationController } from './annotations/annotationController';
 import { CodeLensController } from './codeLensController';
 import { configuration, IConfig } from './configuration';
 import { CurrentLineController } from './currentLineController';
-import { DocumentTracker, GitDocumentState } from './trackers/documentTracker';
 import { ExplorerCommands } from './views/explorerCommands';
 import { GitContentProvider } from './gitContentProvider';
+import { GitDocumentTracker } from './trackers/gitDocumentTracker';
 import { GitExplorer } from './views/gitExplorer';
+import { GitLineTracker } from './trackers/gitLineTracker';
 import { GitRevisionCodeLensProvider } from './gitRevisionCodeLensProvider';
 import { GitService } from './gitService';
 import { Keyboard } from './keyboard';
@@ -20,7 +21,8 @@ export class Container {
         this._context = context;
         this._config = config;
 
-        context.subscriptions.push(this._tracker = new DocumentTracker<GitDocumentState>());
+        context.subscriptions.push(this._lineTracker = new GitLineTracker());
+        context.subscriptions.push(this._tracker = new GitDocumentTracker());
         context.subscriptions.push(this._git = new GitService());
 
         // Since there is a bit of a chicken & egg problem with the DocumentTracker and the GitService, initialize the tracker once the GitService is loaded
@@ -100,6 +102,11 @@ export class Container {
         return this._currentLineController;
     }
 
+    private static _lineTracker: GitLineTracker;
+    static get lineTracker() {
+        return this._lineTracker;
+    }
+
     private static _pageProvider: PageProvider;
     static get pages() {
         return this._pageProvider;
@@ -114,7 +121,7 @@ export class Container {
         return this._resultsExplorer;
     }
 
-    private static _tracker: DocumentTracker<GitDocumentState>;
+    private static _tracker: GitDocumentTracker;
     static get tracker() {
         return this._tracker;
     }

src/currentLineController.ts

@@ -6,9 +6,9 @@ import { Commands } from './commands';
 import { configuration, IConfig, StatusBarCommand } from './configuration';
 import { isTextEditor, RangeEndOfLineIndex } from './constants';
 import { Container } from './container';
-import { DocumentBlameStateChangeEvent, DocumentDirtyIdleTriggerEvent, DocumentDirtyStateChangeEvent, GitDocumentState, TrackedDocument } from './trackers/documentTracker';
+import { DocumentBlameStateChangeEvent, DocumentDirtyIdleTriggerEvent, DocumentDirtyStateChangeEvent, GitDocumentState, TrackedDocument } from './trackers/gitDocumentTracker';
+import { GitLineState, GitLineTracker, LinesChangeEvent } from './trackers/gitLineTracker';
 import { CommitFormatter, GitBlameLine, GitCommit, ICommitFormatOptions } from './gitService';
-import { GitLineState, LinesChangeEvent, LineTracker } from './trackers/lineTracker';
 
 const annotationDecoration: TextEditorDecorationType = window.createTextEditorDecorationType({
     after: {
@@ -63,7 +63,7 @@ export class CurrentLineController extends Disposable {
 
     private _blameAnnotationState: AnnotationState | undefined;
     private _editor: TextEditor | undefined;
-    private _lineTracker: LineTracker<GitLineState>;
+    private _lineTracker: GitLineTracker;
     private _statusBarItem: StatusBarItem | undefined;
 
     private _disposable: Disposable;
@@ -74,7 +74,7 @@ export class CurrentLineController extends Disposable {
     constructor() {
         super(() => this.dispose());
 
-        this._lineTracker = new LineTracker<GitLineState>();
+        this._lineTracker = Container.lineTracker;
 
         this._disposable = Disposable.from(
             this._lineTracker,
@@ -87,7 +87,6 @@ export class CurrentLineController extends Disposable {
 
     dispose() {
         this.clearAnnotations(this._editor);
-
         this.unregisterHoverProviders();
 
         this._debugSessionEndDisposable && this._debugSessionEndDisposable.dispose();
@@ -220,9 +219,9 @@ export class CurrentLineController extends Disposable {
             this.clearAnnotations(this._editor);
         }
         this.clearAnnotations(editor);
+        this.unregisterHoverProviders();
 
         this._lineTracker.reset();
-        this.unregisterHoverProviders();
 
         if (this._statusBarItem !== undefined && reason !== 'lines') {
             this._statusBarItem.hide();
@@ -348,8 +347,7 @@ export class CurrentLineController extends Disposable {
     }
 
     private clearAnnotations(editor: TextEditor | undefined) {
-        if (editor === undefined) return;
-        if ((editor as any)._disposed === true) return;
+        if (editor === undefined || (editor as any)._disposed === true) return;
 
         editor.setDecorations(annotationDecoration, []);
     }
@@ -358,9 +356,7 @@ export class CurrentLineController extends Disposable {
         if (this._blameAnnotationState !== undefined) return this._blameAnnotationState;
 
         const cfg = Container.config;
-        return {
-            enabled: cfg.currentLine.enabled || cfg.statusBar.enabled || (cfg.hovers.enabled && cfg.hovers.currentLine.enabled)
-        };
+        return { enabled: cfg.currentLine.enabled };
     }
 
     private _updateBlameDebounced: (((lines: number[], editor: TextEditor, trackedDocument: TrackedDocument<GitDocumentState>) => void) & IDeferrable) | undefined;
@@ -381,13 +377,13 @@ export class CurrentLineController extends Disposable {
         }
 
         const state = this.getBlameAnnotationState();
-        if (state.enabled) {
+        if (state.enabled || Container.config.statusBar.enabled || (Container.config.hovers.enabled && Container.config.hovers.currentLine.enabled)) {
             if (options.trackedDocument === undefined) {
                 options.trackedDocument = await Container.tracker.getOrAdd(editor.document);
             }
 
             if (options.trackedDocument.isBlameable) {
-                if (state.enabled && Container.config.hovers.enabled && Container.config.hovers.currentLine.enabled &&
+                if (Container.config.hovers.enabled && Container.config.hovers.currentLine.enabled &&
                     (options.full || this._hoverProviderDisposable === undefined)) {
                     this.registerHoverProviders(editor, Container.config.hovers.currentLine);
                 }
@@ -460,7 +456,11 @@ export class CurrentLineController extends Disposable {
 
         // Make sure we are still on the same line, blameable, and not pending, after the await
         if (this._lineTracker.includesAll(lines) && trackedDocument.isBlameable && !(this._updateBlameDebounced && this._updateBlameDebounced.pending!())) {
-            if (!this.getBlameAnnotationState().enabled) return this.clear(editor);
+            if (!this.getBlameAnnotationState().enabled) {
+                if (!Container.config.statusBar.enabled) return this.clear(editor);
+
+                this.clearAnnotations(editor);
+            }
         }
 
         const activeLine = blameLines[0];
@@ -523,7 +523,7 @@ export class CurrentLineController extends Disposable {
 
     private async updateTrailingAnnotations(lines: GitBlameLine[], editor: TextEditor) {
         const cfg = Container.config.currentLine;
-        if (!cfg.enabled || !isTextEditor(editor)) return;
+        if (!this.getBlameAnnotationState().enabled || !isTextEditor(editor)) return this.clearAnnotations(editor);
 
         const decorations = [];
         for (const l of lines) {

src/gitCodeLensProvider.ts

@@ -5,7 +5,7 @@ import { Commands, DiffWithPreviousCommandArgs, ShowQuickCommitDetailsCommandArg
 import { CodeLensCommand, CodeLensLanguageScope, CodeLensScopes, configuration, ICodeLensConfig } from './configuration';
 import { BuiltInCommands, DocumentSchemes } from './constants';
 import { Container } from './container';
-import { DocumentTracker, GitDocumentState } from './trackers/documentTracker';
+import { DocumentTracker, GitDocumentState } from './trackers/gitDocumentTracker';
 import { GitBlame, GitBlameCommit, GitBlameLines, GitService, GitUri } from './gitService';
 import { Logger } from './logger';
 

src/gitService.ts

@@ -4,9 +4,9 @@ import { ConfigurationChangeEvent, Disposable, Event, EventEmitter, Range, TextE
 import { configuration, IRemotesConfig } from './configuration';
 import { CommandContext, DocumentSchemes, setCommandContext } from './constants';
 import { Container } from './container';
-import { CachedBlame, CachedDiff, CachedLog, GitDocumentState, TrackedDocument } from './trackers/documentTracker';
 import { RemoteProviderFactory, RemoteProviderMap } from './git/remotes/factory';
 import { CommitFormatting, Git, GitAuthor, GitBlame, GitBlameCommit, GitBlameLine, GitBlameLines, GitBlameParser, GitBranch, GitBranchParser, GitCommit, GitCommitType, GitDiff, GitDiffChunkLine, GitDiffParser, GitDiffShortStat, GitLog, GitLogCommit, GitLogParser, GitRemote, GitRemoteParser, GitStash, GitStashParser, GitStatus, GitStatusFile, GitStatusParser, GitTag, GitTagParser, IGit, Repository } from './git/git';
+import { CachedBlame, CachedDiff, CachedLog, GitDocumentState, TrackedDocument } from './trackers/gitDocumentTracker';
 import { GitUri, IGitCommitInfo } from './git/gitUri';
 import { Logger } from './logger';
 import * as fs from 'fs';

src/trackers/documentTracker.ts

@@ -6,7 +6,6 @@ import { CommandContext, DocumentSchemes, isActiveDocument, isTextEditor, setCom
 import { GitUri } from '../gitService';
 import { DocumentBlameStateChangeEvent, TrackedDocument } from './trackedDocument';
 
-export { CachedBlame, CachedDiff, CachedLog, GitDocumentState } from './gitDocumentState';
 export * from './trackedDocument';
 
 export interface DocumentDirtyStateChangeEvent<T> {

src/trackers/gitDocumentState.ts → src/trackers/gitDocumentTracker.ts

@@ -1,6 +1,8 @@
 'use strict';
+import { DocumentTracker } from './documentTracker';
 import { GitBlame, GitDiff, GitLog } from './../git/git';
-import { GitBlameCommit, GitLogCommit } from '../gitService';
+
+export * from './documentTracker';
 
 interface CachedItem<T> {
     item: Promise<T>;
@@ -28,10 +30,4 @@ export class GitDocumentState {
     }
 }
 
-export class GitLineState {
-
-    constructor(
-        public readonly commit: GitBlameCommit | undefined,
-        public logCommit?: GitLogCommit
-    ) { }
-}
+export class GitDocumentTracker extends DocumentTracker<GitDocumentState> { }

src/trackers/gitLineTracker.ts

@@ -0,0 +1,42 @@
+'use strict';
+import { GitBlameCommit, GitLogCommit } from '../gitService';
+import { LineTracker } from './lineTracker';
+
+export * from './lineTracker';
+
+export class GitLineState {
+
+    constructor(
+        public readonly commit: GitBlameCommit | undefined,
+        public logCommit?: GitLogCommit
+    ) { }
+}
+
+export class GitLineTracker extends LineTracker<GitLineState> {
+
+    private _count = 0;
+
+    start() {
+        if (this._disposable !== undefined) {
+            this._count = 0;
+            return;
+        }
+
+        this._count++;
+        if (this._count === 1) {
+            super.start();
+        }
+    }
+
+    stop() {
+        if (this._disposable !== undefined) {
+            this._count = 0;
+            return;
+        }
+
+        this._count--;
+        if (this._count === 0) {
+            super.stop();
+        }
+    }
+}

src/trackers/lineTracker.ts

@@ -3,8 +3,6 @@ import { Functions, IDeferrable } from './../system';
 import { Disposable, Event, EventEmitter, TextEditor, TextEditorSelectionChangeEvent, window } from 'vscode';
 import { isTextEditor } from './../constants';
 
-export { GitLineState } from './gitDocumentState';
-
 export interface LinesChangeEvent {
 
     readonly editor: TextEditor | undefined;
@@ -15,12 +13,14 @@ export interface LinesChangeEvent {
 }
 
 export class LineTracker<T> extends Disposable {
+
     private _onDidChangeActiveLines = new EventEmitter<LinesChangeEvent>();
     get onDidChangeActiveLines(): Event<LinesChangeEvent> {
+        this._onDidChangeActiveLines.event.length;
         return this._onDidChangeActiveLines.event;
     }
 
-    private _disposable: Disposable | undefined;
+    protected _disposable: Disposable | undefined;
     private _editor: TextEditor | undefined;
 
     private readonly _state: Map<number, T | undefined> = new Map();

src/ui/settings/index.html

@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8" />
-    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src *; style-src 'self'; script-src 'nonce-gitlens'" /> -->
+    <meta charset="utf-8"/>
+    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src *; style-src 'self'; script-src 'nonce-gitlens'"/> -->
 </head>
 
 <body class="preload">
@@ -12,7 +12,7 @@
             <header>
                 <a class="header__link" title="Learn more about GitLens" href="http://gitlens.amod.io">
                     <div class="header__logo">
-                        <img class="image__logo" src="{{root}}/images/gitlens-icon.png" />
+                        <img class="image__logo" src="{{root}}/images/gitlens-icon.png"/>
                         <div>
                             <h1>GitLens</h1>
                             <p class="header__subtitle">Git supercharged</p>
@@ -55,7 +55,7 @@
                         <div class="section__settings">
                             <div class="settings-group">
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox" />
+                                    <input class="setting" id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox"/>
                                     <label for="gitExplorer.enabled">Show the GitLens explorer</label>
                                 </div>
 
@@ -87,29 +87,29 @@
                                 <p class="setting__hint hidden" data-visibility="gitExplorer.files.layout =auto">Chooses the best layout based on the number of files at each nesting level</p>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="gitExplorer.enabled" disabled>
-                                    <input class="setting" id="gitExplorer.files.compact" name="gitExplorer.files.compact" type="checkbox" disabled />
+                                    <input class="setting" id="gitExplorer.files.compact" name="gitExplorer.files.compact" type="checkbox" disabled/>
                                     <label for="gitExplorer.files.compact">Use compact layout</label>
                                 </div>
                                 <p class="setting__hint setting__hint--indent-1">Compacts (flattens) unnecessary nesting when using a tree layouts</p>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="gitExplorer.enabled" disabled>
-                                    <input class="setting" id="gitExplorer.avatars" name="explorers.avatars" type="checkbox" disabled />
+                                    <input class="setting" id="gitExplorer.avatars" name="explorers.avatars" type="checkbox" disabled/>
                                     <label for="gitExplorer.avatars">Use author avatars icons</label>
                                 </div>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="gitExplorer.enabled" disabled>
-                                    <input class="setting" id="gitExplorer.autoRefresh" name="gitExplorer.autoRefresh" type="checkbox" disabled />
+                                    <input class="setting" id="gitExplorer.autoRefresh" name="gitExplorer.autoRefresh" type="checkbox" disabled/>
                                     <label for="gitExplorer.autoRefresh">Automatically refreshes when the file system or any repository changes</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout !tree" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository-tree-compact.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout =tree &amp; gitExplorer.files.compact" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository-tree.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout =tree &amp; gitExplorer.files.compact =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-explorer-repository-avatars.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; explorers.avatars =true" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout !tree"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository-tree-compact.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout =tree &amp; gitExplorer.files.compact"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-repository-tree.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; gitExplorer.files.layout =tree &amp; gitExplorer.files.compact =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-explorer-repository-avatars.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view !history &amp; explorers.avatars =true"/>
 
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-history.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view =history" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-explorer-history-avatars.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view =history &amp; explorers.avatars =true" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-explorer-history.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view =history"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-explorer-history-avatars.png" data-visibility="gitExplorer.enabled &amp; gitExplorer.view =history &amp; explorers.avatars =true"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -139,22 +139,22 @@
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="resultsExplorer.files.compact" name="resultsExplorer.files.compact" type="checkbox" />
+                                    <input class="setting" id="resultsExplorer.files.compact" name="resultsExplorer.files.compact" type="checkbox"/>
                                     <label for="resultsExplorer.files.compact">Use compact layout</label>
                                 </div>
                                 <p class="setting__hint setting__hint">Compacts (flattens) unnecessary nesting when using a tree layouts</p>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="resultsExplorer.avatars" name="explorers.avatars" type="checkbox" />
+                                    <input class="setting" id="resultsExplorer.avatars" name="explorers.avatars" type="checkbox"/>
                                     <label for="resultsExplorer.avatars">Use author avatars icons</label>
                                 </div>
                             </div>
 
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results.png" data-visibility="resultsExplorer.files.layout !tree" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results-tree-compact.png" data-visibility="resultsExplorer.files.layout =tree &amp; resultsExplorer.files.compact" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results-tree.png" data-visibility="resultsExplorer.files.layout =tree &amp; resultsExplorer.files.compact =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-results-avatars.png" data-visibility="explorers.avatars =true" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results.png" data-visibility="resultsExplorer.files.layout !tree"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results-tree-compact.png" data-visibility="resultsExplorer.files.layout =tree &amp; resultsExplorer.files.compact"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-results-tree.png" data-visibility="resultsExplorer.files.layout =tree &amp; resultsExplorer.files.compact =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-results-avatars.png" data-visibility="explorers.avatars =true"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -175,12 +175,12 @@
                         <div class="section__settings">
                             <div class="settings-group">
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="codeLens.enabled" name="codeLens.enabled" type="checkbox" />
+                                    <input class="setting" id="codeLens.enabled" name="codeLens.enabled" type="checkbox"/>
                                     <label for="codeLens.enabled">Show the authorship code lenses</label>
                                 </div>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="codeLens.enabled" disabled>
-                                    <input class="setting" id="codeLens.recentChange.enabled" name="codeLens.recentChange.enabled" type="checkbox" disabled />
+                                    <input class="setting" id="codeLens.recentChange.enabled" name="codeLens.recentChange.enabled" type="checkbox" disabled/>
                                     <label for="codeLens.recentChange.enabled">Add the author and date of the most recent change for the file or code block</label>
                                 </div>
                                 <div class="settings-group__setting ml-4" data-enablement="codeLens.enabled &amp; codeLens.recentChange.enabled"
@@ -197,7 +197,7 @@
                                 </div>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="codeLens.enabled" disabled>
-                                    <input class="setting" id="codeLens.authors.enabled" name="codeLens.authors.enabled" type="checkbox" disabled />
+                                    <input class="setting" id="codeLens.authors.enabled" name="codeLens.authors.enabled" type="checkbox" disabled/>
                                     <label for="codeLens.authors.enabled">Add the number of authors and the most prominent author of the file or code block</label>
                                 </div>
                                 <div class="settings-group__setting ml-4" data-enablement="codeLens.enabled &amp; codeLens.authors.enabled"
@@ -217,31 +217,31 @@
                                     <label class="non-interactive">Add code lens to the following scopes</label>
                                 </div>
                                 <div class="settings-group__setting nowrap ml-4" data-enablement="codeLens.enabled" disabled>
-                                    <input class="setting" id="codeLens.scopes" name="codeLens.scopes" type="checkbox" value="document" data-type="array" disabled />
+                                    <input class="setting" id="codeLens.scopes" name="codeLens.scopes" type="checkbox" value="document" data-type="array" disabled/>
                                     <label for="codeLens.scopes">File scope &mdash; added at the top of the file</label>
                                 </div>
                                 <div class="settings-group__setting nowrap ml-4" data-enablement="codeLens.enabled" disabled>
-                                    <input class="setting" id="codeLens.scopes-1" name="codeLens.scopes" type="checkbox" value="containers" data-type="array" disabled />
+                                    <input class="setting" id="codeLens.scopes-1" name="codeLens.scopes" type="checkbox" value="containers" data-type="array" disabled/>
                                     <label for="codeLens.scopes-1">Containers scope &mdash; added at the start of modules, classes, interfaces, etc</label>
                                 </div>
                                 <div class="settings-group__setting nowrap ml-4" data-enablement="codeLens.enabled" disabled>
-                                    <input class="setting" id="codeLens.scopes-2" name="codeLens.scopes" type="checkbox" value="blocks" data-type="array" disabled />
+                                    <input class="setting" id="codeLens.scopes-2" name="codeLens.scopes" type="checkbox" value="blocks" data-type="array" disabled/>
                                     <label for="codeLens.scopes-2">Block scope &mdash; added at the start of functions, methods, etc</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview" src="{{root}}/images/settings/code-lens.png" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document" />
-
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers" />
-
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks" />
+                                <img class="image__preview" src="{{root}}/images/settings/code-lens.png"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-file-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"/>
+
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-containers-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"/>
+
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-recent+authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-recent.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-blocks-authors.png" data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -266,15 +266,13 @@
                         <div class="section__settings">
                             <div class="settings-group">
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="currentLine.enabled" name="currentLine.enabled" type="checkbox" data-add-settings-off="hovers.currentLine.over=line"
-                                    />
+                                    <input class="setting" id="currentLine.enabled" name="currentLine.enabled" type="checkbox" data-add-settings-off="hovers.currentLine.over=line"/>
                                     <label for="currentLine.enabled">Show a blame annotation at the end of the current line</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview" src="{{root}}/images/settings/current-line-blame.png" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/current-line-blame-on.png" data-visibility="currentLine.enabled"
-                                />
+                                <img class="image__preview" src="{{root}}/images/settings/current-line-blame.png"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/current-line-blame-on.png" data-visibility="currentLine.enabled"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -307,7 +305,7 @@
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="blame.heatmap.enabled" name="blame.heatmap.enabled" type="checkbox" />
+                                    <input class="setting" id="blame.heatmap.enabled" name="blame.heatmap.enabled" type="checkbox"/>
                                     <label for="blame.heatmap.enabled">Add a heatmap (age) indicator</label>
                                 </div>
                                 <p class="setting__hint">Quickly tell the age of a line &mdash; indicator ranges from bright yellow (newer) to dark brown (older)</p>
@@ -321,44 +319,44 @@
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="blame.avatars" name="blame.avatars" type="checkbox" />
+                                    <input class="setting" id="blame.avatars" name="blame.avatars" type="checkbox"/>
                                     <label for="blame.avatars">Add author avatars in the gutter</label>
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="blame.highlight.enabled" name="blame.highlight.enabled" type="checkbox" />
+                                    <input class="setting" id="blame.highlight.enabled" name="blame.highlight.enabled" type="checkbox"/>
                                     <label for="blame.highlight.enabled">Highlight other lines changed with the current line</label>
                                 </div>
 
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="blame.highlight.enabled" disabled>
-                                    <input class="setting" id="blame.highlight.locations" name="blame.highlight.locations" type="checkbox" value="gutter" data-type="array" disabled />
+                                    <input class="setting" id="blame.highlight.locations" name="blame.highlight.locations" type="checkbox" value="gutter" data-type="array" disabled/>
                                     <label for="blame.highlight.locations">Add gutter highlight</label>
                                 </div>
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="blame.highlight.enabled" disabled>
-                                    <input class="setting" id="blame.highlight.locations-1" name="blame.highlight.locations" type="checkbox" value="line" data-type="array" disabled />
+                                    <input class="setting" id="blame.highlight.locations-1" name="blame.highlight.locations" type="checkbox" value="line" data-type="array" disabled/>
                                     <label for="blame.highlight.locations-1">Add line highlight</label>
                                 </div>
                                 <div class="settings-group__setting nowrap ml-2" data-enablement="blame.highlight.enabled" disabled>
-                                    <input class="setting" id="blame.highlight.locations-2" name="blame.highlight.locations" type="checkbox" value="overview" data-type="array" disabled />
+                                    <input class="setting" id="blame.highlight.locations-2" name="blame.highlight.locations" type="checkbox" value="overview" data-type="array" disabled/>
                                     <label for="blame.highlight.locations-2">Add scroll bar highlight</label>
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="blame.compact" name="blame.compact" type="checkbox" />
+                                    <input class="setting" id="blame.compact" name="blame.compact" type="checkbox"/>
                                     <label for="blame.compact">Use compact view</label>
                                 </div>
                                 <p class="setting__hint">Compacts (deduplicates) matching adjacent blame annotations</p>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/blame.png" data-visibility="blame.compact =false" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/blame-compact.png" data-visibility="blame.compact" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-avatars.png" data-visibility="blame.avatars &amp; blame.compact =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-avatars-compact.png" data-visibility="blame.avatars &amp; blame.compact" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-gutter.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-line.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +line" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-scrollbar.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-heatmap-left.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-heatmap-right.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/blame.png" data-visibility="blame.compact =false"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/blame-compact.png" data-visibility="blame.compact"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-avatars.png" data-visibility="blame.avatars &amp; blame.compact =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-avatars-compact.png" data-visibility="blame.avatars &amp; blame.compact"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-gutter.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-line.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +line"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-scrollbar.png" data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-heatmap-left.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-heatmap-right.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -396,7 +394,7 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview" src="{{root}}/images/settings/heatmap.png" />
+                                <img class="image__preview" src="{{root}}/images/settings/heatmap.png"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -424,63 +422,66 @@
                             <div class="settings-group">
                                 <div class="settings-group__setting">
                                     <div class="settings-group__setting nowrap">
-                                        <input class="setting" id="hovers.enabled" name="hovers.enabled" type="checkbox" />
+                                        <input class="setting" id="hovers.enabled" name="hovers.enabled" type="checkbox"/>
                                         <label for="hovers.enabled">Show blame hovers</label>
                                     </div>
                                 </div>
                                 <div class="settings-group__setting">
-                                    <div class="settings-group__setting nowrap ml-2 hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled"
-                                        disabled>
-                                        <input class="setting" id="hovers.currentLine.enabled" name="hovers.currentLine.enabled" type="checkbox" disabled />
+                                    <div class="settings-group__setting nowrap ml-2 hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled" disabled>
+                                        <input class="setting" id="hovers.currentLine.enabled" name="hovers.currentLine.enabled" type="checkbox" disabled/>
                                         <label for="hovers.currentLine.enabled">Show hovers for the current line</label>
                                     </div>
-                                    <div class="settings-group__setting nowrap ml-2 hidden" data-visibility="currentLine.enabled =false"
-                                        data-enablement="hovers.enabled" disabled>
-                                        <input class="setting" id="hovers.currentLine.enabled-1" name="hovers.currentLine.enabled" type="checkbox" data-add-settings-on="hovers.currentLine.over=line" disabled
-                                        />
+                                    <div class="settings-group__setting nowrap ml-2 hidden" data-visibility="currentLine.enabled =false" data-enablement="hovers.enabled" disabled>
+                                        <input class="setting" id="hovers.currentLine.enabled-1" name="hovers.currentLine.enabled" type="checkbox" data-add-settings-on="hovers.currentLine.over=line" disabled/>
                                         <label for="hovers.currentLine.enabled-1">Show hovers for the current line</label>
                                     </div>
-                                    <div class="settings-group__setting ml-4 hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled"
-                                        disabled>
+                                    <div class="settings-group__setting ml-4 hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled" disabled>
                                         <label for="hovers.currentLine.over">Shown when over the</label>
                                         <select class="setting" id="hovers.currentLine.over" name="hovers.currentLine.over" disabled>
                                             <option value="annotation">annotation only</option>
                                             <option value="line">line &amp; annotation</option>
                                         </select>
                                     </div>
+                                    <div class="settings-group__setting ml-4 hidden" data-visibility="currentLine.enabled =false" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled &amp; currentLine.enabled" disabled>
+                                        <label for="hovers.currentLine.over">Shown when over the</label>
+                                        <select class="setting" id="hovers.currentLine.over" name="hovers.currentLine.over" disabled>
+                                            <option value="annotation">annotation only</option>
+                                            <option value="line">line</option>
+                                        </select>
+                                    </div>
 
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled"
                                         disabled>
-                                        <input class="setting" id="hovers.currentLine.details" name="hovers.currentLine.details" type="checkbox" disabled />
+                                        <input class="setting" id="hovers.currentLine.details" name="hovers.currentLine.details" type="checkbox" disabled/>
                                         <label for="hovers.currentLine.details">Add blame details</label>
                                     </div>
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled"
                                         disabled>
-                                        <input class="setting" id="hovers.currentLine.changes" name="hovers.currentLine.changes" type="checkbox" disabled />
+                                        <input class="setting" id="hovers.currentLine.changes" name="hovers.currentLine.changes" type="checkbox" disabled/>
                                         <label for="hovers.currentLine.changes">Add changes (diff)</label>
                                     </div>
                                 </div>
                             </div>
                             <div class="section__preview mb-2">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-line.png" data-visibility="hovers.currentLine.over =line" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-line.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-blame.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =line" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details+changes.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details+changes.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-changes.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-changes.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes" />
-
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-annotation.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-details+changes.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-details.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-changes.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-line.png" data-visibility="hovers.currentLine.over =line"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-line.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-blame.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =line"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details+changes.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details+changes.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-details.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-changes.png" data-visibility="hovers.currentLine.over =line &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-line-changes.png" data-visibility="currentLine.enabled =false &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"/>
+
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-annotation.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-details+changes.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-details.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-changes.png" data-visibility="currentLine.enabled &amp; hovers.currentLine.over =annotation &amp; hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"/>
                             </div>
                             <div class="settings-group">
                                 <div class="settings-group__setting">
                                     <div class="settings-group__setting nowrap ml-2" data-enablement="hovers.enabled" disabled>
-                                        <input class="setting" id="hovers.annotations.enabled" name="hovers.annotations.enabled" type="checkbox" disabled />
+                                        <input class="setting" id="hovers.annotations.enabled" name="hovers.annotations.enabled" type="checkbox" disabled/>
                                         <label for="hovers.annotations.enabled">Show hovers while annotating</label>
                                     </div>
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp; hovers.annotations.enabled" disabled>
@@ -493,23 +494,23 @@
 
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp; hovers.annotations.enabled"
                                         disabled>
-                                        <input class="setting" id="hovers.annotations.details" name="hovers.annotations.details" type="checkbox" disabled />
+                                        <input class="setting" id="hovers.annotations.details" name="hovers.annotations.details" type="checkbox" disabled/>
                                         <label for="hovers.annotations.details">Add blame details</label>
                                     </div>
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp; hovers.annotations.enabled"
                                         disabled>
-                                        <input class="setting" id="hovers.annotations.changes" name="hovers.annotations.changes" type="checkbox" disabled />
+                                        <input class="setting" id="hovers.annotations.changes" name="hovers.annotations.changes" type="checkbox" disabled/>
                                         <label for="hovers.annotations.changes">Add changes (diff)</label>
                                     </div>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations.png" data-visibility="blame.compact =false" />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations-compact.png" data-visibility="blame.compact" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-details+changes.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-details.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-changes.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-heatmap.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations.png" data-visibility="blame.compact =false"/>
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations-compact.png" data-visibility="blame.compact"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-details+changes.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-details.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-changes.png" data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-heatmap.png" data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"/>
                             </div>
                         </div>
                     </section>
@@ -534,23 +535,23 @@
                                 </div>
 
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="recentChanges.highlight.locations" name="recentChanges.highlight.locations" type="checkbox" value="gutter" data-type="array" />
+                                    <input class="setting" id="recentChanges.highlight.locations" name="recentChanges.highlight.locations" type="checkbox" value="gutter" data-type="array"/>
                                     <label for="recentChanges.highlight.locations">Add gutter highlight</label>
                                 </div>
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="recentChanges.highlight.locations-1" name="recentChanges.highlight.locations" type="checkbox" value="line" data-type="array" />
+                                    <input class="setting" id="recentChanges.highlight.locations-1" name="recentChanges.highlight.locations" type="checkbox" value="line" data-type="array"/>
                                     <label for="recentChanges.highlight.locations-1">Add line highlight</label>
                                 </div>
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="recentChanges.highlight.locations-2" name="recentChanges.highlight.locations" type="checkbox" value="overview" data-type="array" />
+                                    <input class="setting" id="recentChanges.highlight.locations-2" name="recentChanges.highlight.locations" type="checkbox" value="overview" data-type="array"/>
                                     <label for="recentChanges.highlight.locations-2">Add scroll bar highlight</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview" src="{{root}}/images/settings/recent-changes.png" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-gutter.png" data-visibility="recentChanges.highlight.locations +gutter" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-line.png" data-visibility="recentChanges.highlight.locations +line" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-scrollbar.png" data-visibility="recentChanges.highlight.locations +overview" />
+                                <img class="image__preview" src="{{root}}/images/settings/recent-changes.png"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-gutter.png" data-visibility="recentChanges.highlight.locations +gutter"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-line.png" data-visibility="recentChanges.highlight.locations +line"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/recent-changes-highlight-scrollbar.png" data-visibility="recentChanges.highlight.locations +overview"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
@@ -577,7 +578,7 @@
                         <div class="section__settings">
                             <div class="settings-group">
                                 <div class="settings-group__setting nowrap">
-                                    <input class="setting" id="statusBar.enabled" name="statusBar.enabled" type="checkbox" />
+                                    <input class="setting" id="statusBar.enabled" name="statusBar.enabled" type="checkbox"/>
                                     <label for="statusBar.enabled">Show a Git blame annotation for the current line in the status bar</label>
                                 </div>
                                 <div class="settings-group__setting ml-2" data-enablement="statusBar.enabled" disabled>
@@ -602,9 +603,9 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview" src="{{root}}/images/settings/status-bar.png" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/status-bar-left.png" data-visibility="statusBar.enabled &amp; statusBar.alignment =left" />
-                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/status-bar-right.png" data-visibility="statusBar.enabled &amp; statusBar.alignment =right" />
+                                <img class="image__preview" src="{{root}}/images/settings/status-bar.png"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/status-bar-left.png" data-visibility="statusBar.enabled &amp; statusBar.alignment =left"/>
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/status-bar-right.png" data-visibility="statusBar.enabled &amp; statusBar.alignment =right"/>
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>