Reworks images to be overlays

src/ui/scss/main.scss

@@ -39,8 +39,7 @@ b {
 }
 
 code,
-.shortcut-key,
-.command {
+.shortcut-key {
     background-color: var(--background-color--lighten-15);
     padding: 1px 5px;
     vertical-align: bottom;
@@ -156,6 +155,10 @@ ul {
     padding: 0;
 }
 
+.command {
+    padding: 1px 3px;
+}
+
 .container {
     align-items: center;
     display: flex;
@@ -217,10 +220,10 @@ ul {
 }
 
 .icon__info {
-    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path fill="none" d="M0 0h100v100H0z"/><path d="M50 21a29 29 0 1 0 29 29 29 29 0 0 0-29-29zm0 55a26 26 0 1 1 26-26 26 26 0 0 1-26 26z"/><path d="M48 45l-1 1v18l1 1h4l1-1V46l-1-1zm0-10l-1 1v4l1 1h4l1-1v-4l-1-1z"/></svg>');
     mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path fill="none" d="M0 0h100v100H0z"/><path d="M50 21a29 29 0 1 0 29 29 29 29 0 0 0-29-29zm0 55a26 26 0 1 1 26-26 26 26 0 0 1-26 26z"/><path d="M48 45l-1 1v18l1 1h4l1-1V46l-1-1zm0-10l-1 1v4l1 1h4l1-1v-4l-1-1z"/></svg>');
-    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path fill="none" d="M0 0h100v100H0z"/><path d="M50 21a29 29 0 1 0 29 29 29 29 0 0 0-29-29zm0 55a26 26 0 1 1 26-26 26 26 0 0 1-26 26z"/><path d="M48 45l-1 1v18l1 1h4l1-1V46l-1-1zm0-10l-1 1v4l1 1h4l1-1v-4l-1-1z"/></svg>');
     mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
 }
 
 .icon--lg {
@@ -241,6 +244,12 @@ ul {
     box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.8), 0px 0px 12px 1px rgba(0, 0, 0, 0.5);
 }
 
+.image__preview--overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
 .label__hint {
     color: var(--color--75);
     display: block;
@@ -329,6 +338,7 @@ ul {
     flex: 30% 1 1;
     margin-left: 2em;
     min-width: 400px;
+    position: relative;
 }
 
 .section__settings {
@@ -344,6 +354,38 @@ ul {
     flex: 100% 0 0;
     flex-wrap: wrap;
     margin-bottom: 2em;
+
+    position: relative;
+    cursor: pointer;
+
+    &:after {
+        background-color: var(--color--75);
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 32px;
+        height: 40px;
+        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
+        -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 62a3 3 0 0 1-2-1L26 44a3 3 0 0 1 3-5l21 16 21-16a3 3 0 1 1 3 5L52 61a3 3 0 0 1-2 1z"/></svg>');
+        mask-size: 32px 40px;
+        -webkit-mask-size: 32px 40px;
+        mask-repeat: no-repeat;
+        -webkit-mask-repeat: no-repeat;
+        transition: transform 500ms cubic-bezier(0, 1.5, 1, 1);
+    }
+
+    &.collapsed {
+        margin-bottom: 0;
+
+        &:after {
+            transform: rotateX(180deg);
+        }
+
+        & + .section__settings {
+            display: none;
+        }
+    }
 }
 
 .section__title {
@@ -358,6 +400,7 @@ ul {
 }
 
 .section-group__content {
+    flex: auto 1 1;
     min-width: 0;
 }
 
@@ -414,6 +457,12 @@ ul {
 .settings-group__hint {
     color: var(--color--75);
     font-weight: 200;
+
+    span {
+        display: inline-block;
+        margin-left: 34px;
+        margin-top: 0.5em;
+    }
 }
 
 .settings-group__setting {

src/ui/settings/app.ts

@@ -18,14 +18,17 @@ export class App {
         initializeColorPalette();
         this.initializeState();
 
-        const onChecked = this.onChecked.bind(this);
-        DOM.listenAll('input[type="checkbox"],input[type="radio"]', 'change', function(this: HTMLInputElement) { onChecked(this); });
+        const onInputChecked = this.onInputChecked.bind(this);
+        DOM.listenAll('input[type="checkbox"],input[type="radio"]', 'change', function(this: HTMLInputElement) { onInputChecked(this); });
 
-        const onSelected = this.onSelected.bind(this);
-        DOM.listenAll('select', 'change', function(this: HTMLInputElement) { onSelected(this); });
+        const onInputSelected = this.onInputSelected.bind(this);
+        DOM.listenAll('select', 'change', function(this: HTMLInputElement) { onInputSelected(this); });
+
+        const onSectionHeaderClicked = this.onSectionHeaderClicked.bind(this);
+        DOM.listenAll('.section__header', 'click', function(this: HTMLInputElement) { onSectionHeaderClicked(this); });
     }
 
-    private onChecked(element: HTMLInputElement) {
+    private onInputChecked(element: HTMLInputElement) {
         console.log(`SettingsApp.onChange: name=${element.name}, checked=${element.checked}, value=${element.value}`);
 
         if (element.dataset.type === 'array') {
@@ -58,7 +61,7 @@ export class App {
         this.applyChanges();
     }
 
-    private onSelected(element: HTMLSelectElement) {
+    private onInputSelected(element: HTMLSelectElement) {
         const value = element.options[element.selectedIndex].value;
 
         console.log(`SettingsApp.onSelected: name=${element.name}, value=${value}`);
@@ -68,6 +71,10 @@ export class App {
         this.applyChanges();
     }
 
+    private onSectionHeaderClicked(element: HTMLElement) {
+        element.classList.toggle('collapsed');
+    }
+
     private applyChanges() {
         const args = JSON.stringify(this._changes);
         console.log(`SettingsApp.applyChanges: changes=${args}`);
@@ -152,13 +159,24 @@ function ensureIfBoolean(value: string | boolean): string | boolean {
 function evaluateStateExpression(expression: string, changes: { [key: string]: string | boolean }): boolean {
     let state = false;
     for (const expr of expression.trim().split('&&')) {
-        const [lhs, rhs] = parseStateExpression(expr);
+        const [lhs, op, rhs] = parseStateExpression(expr);
 
-        let value = changes[lhs];
-        if (value === undefined) {
-            value = getSettingValue<string | boolean>(lhs);
+        switch (op) {
+            case '=':
+                let value = changes[lhs];
+                if (value === undefined) {
+                    value = getSettingValue<string | boolean>(lhs);
+                }
+                state = rhs !== undefined ? rhs === '' + value : !!value;
+                break;
+
+            case '+':
+                if (rhs !== undefined) {
+                    const setting = getSettingValue<string[]>(lhs);
+                    state = setting.includes(rhs.toString());
+                }
+                break;
         }
-        state = rhs !== undefined ? rhs === '' + value : !!value;
 
         if (!state) break;
     }
@@ -181,9 +199,9 @@ function parseAdditionalSettingsExpression(expression: string): [string, string
     });
 }
 
-function parseStateExpression(expression: string): [string, string | boolean | undefined] {
-    const [lhs, rhs] = expression.trim().split('=');
-    return [lhs.trim(), rhs !== undefined ? rhs.trim() : rhs];
+function parseStateExpression(expression: string): [string, string, string | boolean | undefined] {
+    const [lhs, op, rhs] = expression.trim().split(/([=\+])/);
+    return [lhs.trim(), op !== undefined ? op.trim() : '=', rhs !== undefined ? rhs.trim() : rhs];
 }
 
 function flatten(o: { [key: string]: any }, path?: string): { [key: string]: any } {

src/ui/settings/index.html

@@ -29,7 +29,7 @@
             <div class="page-header">
                 <h2 class="page-header__title">Settings</h2>
                 <p class="page-header__subtitle">For advanced customizations open and edit
-                    <a title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a>
+                    <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a>
                 </p>
             </div>
 
@@ -68,114 +68,18 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; gitExplorer.avatars =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; gitExplorer.avatars"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository &amp;&amp; gitExplorer.avatars =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository &amp;&amp; gitExplorer.avatars"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-history.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history &amp;&amp; gitExplorer.avatars =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-history-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history &amp;&amp; gitExplorer.avatars"
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository" />
+                                <img class="image__preview hidden" src="{{root}}/images/settings/gitlens-view-history.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; explorers.avatars" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository &amp;&amp; explorers.avatars" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/gitlens-view-history-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history &amp;&amp; explorers.avatars"
                                 />
                             </div>
-                        </div>
-                    </section>
-
-                    <section id="blame">
-                        <div class="section__header">
-                            <h2 class="section__title">Gutter Blame
-                                <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#git-blame-annotations">
-                                    <i class="icon icon__info"></i>
-                                </a>
-                            </h2>
-                            <p class="section__title-hint">Adds Git blame annotations for the current file to the gutter</p>
-                        </div>
-                        <div class="section__settings">
-                            <div class="settings-group">
-                                <div class="settings-group__setting nowrap">
-                                    <input 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>
-
-                                <div class="settings-group__setting ml-2" data-enablement="blame.heatmap.enabled" disabled>
-                                    <label for="blame.heatmap.location">Position the heatmap on the</label>
-                                    <select id="blame.heatmap.location" name="blame.heatmap.location" disabled>
-                                        <option value="left">left</option>
-                                        <option value="right">right</option>
-                                    </select>
-                                </div>
-
-                                <div class="settings-group__setting nowrap">
-                                    <input 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 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 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 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 id="blame.highlight.locations-2" name="blame.highlight.locations" type="checkbox" value="overviewRuler" data-type="array" disabled />
-                                    <label for="blame.highlight.locations-2">Add scroll bar highlight</label>
-                                </div>
-
-                                <div class="settings-group__setting nowrap">
-                                    <input id="blame.compact" name="blame.compact" type="checkbox" />
-                                    <label for="blame.compact">Use compact view</label>
-                                </div>
-                                <p class="setting__hint">Compacts (deduplicate) matching adjacent blame annotations</p>
-                            </div>
-                            <div class="section__preview">
-                                <!-- <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-details.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole-details.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole-details.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-changes.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole-changes.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole-changes.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                /> -->
-                            </div>
+                            <p class="settings-group__hint">
+                                <i class="icon icon--lg icon__info"></i>
+                                For more advanced customizations open <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a> and search for <b><i>gitlens.gitExplorer</i></b>
+                            </p>
                         </div>
                     </section>
 
@@ -228,21 +132,18 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/code-lens.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/code-lens-off.png" data-visibility="codeLens.enabled =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/code-lens-off.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled =false &amp;&amp; codeLens.authors.enabled =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/code-lens-recent.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/code-lens-authors.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled =false &amp;&amp; codeLens.authors.enabled"
-                                />
+                                <img class="image__preview" src="{{root}}/images/settings/code-lens.png" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-recent+authors.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-recent.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled =false" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/code-lens-authors.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled =false &amp;&amp; codeLens.authors.enabled" />
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
-                                Use the
-                                <a class="command" title="Run command" href="command:gitlens.toggleCodeLens">GitLens: Toggle Git Code Lens</a> command to override this setting for the current window
+                                For more advanced customizations open <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a> and search for <b><i>gitlens.codeLens</i></b>
+                                <span>
+                                    Use the
+                                    <a class="command" title="Run command" href="command:gitlens.toggleCodeLens">GitLens: Toggle Git Code Lens</a> command to override this setting for the current window
+                                </span>
                             </p>
                         </div>
                     </section>
@@ -265,16 +166,89 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/current-line-blame.png" data-visibility="currentLine.enabled"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/current-line-blame-off.png" data-visibility="currentLine.enabled =false"
+                                <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>
-                                Use the
-                                <a class="command" title="Run command" href="command:gitlens.toggleLineBlame" class="command">GitLens: Toggle Line Blame Annotations</a> command to override this setting for the current
-                                window
+                                For more advanced customizations open <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a> and search for <b><i>gitlens.currentLine</i></b>
+                                <span>
+                                    Use the
+                                    <a class="command" title="Run command" href="command:gitlens.toggleLineBlame" class="command">GitLens: Toggle Line Blame Annotations</a> command to override this setting for the current window
+                                </span>
+                            </p>
+                        </div>
+                    </section>
+
+                    <section id="blame">
+                        <div class="section__header">
+                            <h2 class="section__title">Gutter Blame
+                                <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#git-blame-annotations">
+                                    <i class="icon icon__info"></i>
+                                </a>
+                            </h2>
+                            <p class="section__title-hint">Adds Git blame annotations for the current file to the gutter</p>
+                        </div>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting nowrap">
+                                    <input 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>
+
+                                <div class="settings-group__setting ml-2" data-enablement="blame.heatmap.enabled" disabled>
+                                    <label for="blame.heatmap.location">Position the heatmap on the</label>
+                                    <select id="blame.heatmap.location" name="blame.heatmap.location" disabled>
+                                        <option value="left">left</option>
+                                        <option value="right">right</option>
+                                    </select>
+                                </div>
+
+                                <div class="settings-group__setting nowrap">
+                                    <input 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 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 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 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 id="blame.highlight.locations-2" name="blame.highlight.locations" type="checkbox" value="overviewRuler" data-type="array" disabled />
+                                    <label for="blame.highlight.locations-2">Add scroll bar highlight</label>
+                                </div>
+
+                                <div class="settings-group__setting nowrap">
+                                    <input id="blame.compact" name="blame.compact" type="checkbox" />
+                                    <label for="blame.compact">Use compact view</label>
+                                </div>
+                                <p class="setting__hint">Compacts (deduplicate) 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;&amp; blame.compact =false" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-avatars-compact.png" data-visibility="blame.avatars &amp;&amp; blame.compact" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-highlight-gutter.png" data-visibility="blame.highlight.enabled &amp;&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;&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;&amp; blame.highlight.locations +overviewRuler" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/blame-heatmap-left.png" data-visibility="blame.heatmap.enabled &amp;&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;&amp; blame.heatmap.location =right" />
+                            </div>
+                            <p class="settings-group__hint">
+                                <i class="icon icon--lg icon__info"></i>
+                                For more advanced customizations open <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a> and search for <b><i>gitlens.blame</i></b>
                             </p>
                         </div>
                     </section>
@@ -295,7 +269,8 @@
                                         <input id="hovers.enabled" name="hovers.enabled" type="checkbox" />
                                         <label for="hovers.enabled">Show Git 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 id="hovers.currentLine.enabled" name="hovers.currentLine.enabled" type="checkbox" disabled />
@@ -311,8 +286,8 @@
                                         disabled>
                                         <label for="hovers.currentLine.over">Shown when over the</label>
                                         <select id="hovers.currentLine.over" name="hovers.currentLine.over" disabled>
-                                            <option value="annotation">annotation</option>
-                                            <option value="line">line</option>
+                                            <option value="annotation">annotation only</option>
+                                            <option value="line">line &amp; annotation</option>
                                         </select>
                                     </div>
 
@@ -329,42 +304,20 @@
                                 </div>
                             </div>
                             <div class="section__preview mb-2">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine.png" data-visibility="hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-whole.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-currentLine-off-whole.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled =false &amp;&amp; hovers.currentLine.enabled =false &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-details.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole-details.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole-details.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes =false &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-changes.png" data-visibility="hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =annotation"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-whole-changes.png" data-visibility="currentLine.enabled &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-off-whole-changes.png" data-visibility="currentLine.enabled =false &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes &amp;&amp; hovers.currentLine.over =line"
-                                />
+                                <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;&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;&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;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&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;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&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;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&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;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&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;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&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;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes" />
+
+                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-currentLine-annotation.png" data-visibility="currentLine.enabled &amp;&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;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&amp; hovers.currentLine.changes" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-currentLine-annotation-details.png" data-visibility="currentLine.enabled &amp;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details &amp;&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;&amp; hovers.currentLine.over =annotation &amp;&amp; hovers.enabled &amp;&amp; hovers.currentLine.enabled &amp;&amp; hovers.currentLine.details =false &amp;&amp; hovers.currentLine.changes" />
                             </div>
                             <div class="settings-group">
                                 <div class="settings-group__setting">
@@ -375,8 +328,8 @@
                                     <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled" disabled>
                                         <label for="hovers.annotations.over">Shown when over the</label>
                                         <select id="hovers.annotations.over" name="hovers.annotations.over" disabled>
-                                            <option value="annotation">annotation</option>
-                                            <option value="line">line</option>
+                                            <option value="annotation">annotation only</option>
+                                            <option value="line">line &amp; annotation</option>
                                         </select>
                                     </div>
 
@@ -393,18 +346,12 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-annotations.png" data-visibility="hovers.enabled = false &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-annotations.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled =false &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-off-annotations.png" data-visibility="hovers.enabled =false &amp;&amp; hovers.annotations.enabled =false &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations-details.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/hovers-annotations-changes.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details =false &amp;&amp; hovers.annotations.changes"
-                                />
+                                <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;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-details.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details &amp;&amp; hovers.annotations.changes =false" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-changes.png" data-visibility="hovers.enabled &amp;&amp; hovers.annotations.enabled &amp;&amp; hovers.annotations.details =false &amp;&amp; hovers.annotations.changes" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/hovers-annotations-heatmap.png" data-visibility="blame.heatmap.enabled &amp;&amp; blame.heatmap.location =right" />
                             </div>
                         </div>
                     </section>
@@ -446,18 +393,18 @@
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings/status-bar-off.png" data-visibility="statusBar.enabled =false"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/status-bar-left.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =left"
-                                />
-                                <img class="image__preview hidden" src="{{root}}/images/settings/status-bar-right.png" data-visibility="statusBar.enabled &amp;&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;&amp; statusBar.alignment =left" />
+                                <img class="image__preview--overlay hidden" src="{{root}}/images/settings/status-bar-right.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =right" />
                             </div>
                             <p class="settings-group__hint">
                                 <i class="icon icon--lg icon__info"></i>
-                                Use the
-                                <a class="command" title="Run command" href="command:gitlens.toggleLineBlame" class="command">GitLens: Toggle Line Blame Annotations</a> command to override this setting for the current
-                                window
+                                For more advanced customizations open <a class="command" title="Open User Settings" href="command:workbench.action.openGlobalSettings">User Settings</a> and search for <b><i>gitlens.statusBar</i></b>
+                                <span>
+                                    Use the
+                                    <a class="command" title="Run command" href="command:gitlens.toggleLineBlame" class="command">GitLens: Toggle Line Blame Annotations</a> command to override this setting for the current window
+
+                                </span>
                             </p>
                         </div>
                     </section>
@@ -469,7 +416,7 @@
                                 <b>
                                     <i>gitlens</i>
                                 </b> in the
-                                <a title="Open Keyboard Shortcuts" href="command:workbench.action.openGlobalKeybindings">Keyboard Shortcuts</a> editor to see the shortcuts and to customize them further</p>
+                                <a class="command" title="Open Keyboard Shortcuts" href="command:workbench.action.openGlobalKeybindings">Keyboard Shortcuts</a> editor to see the shortcuts and to customize them further</p>
                         </div>
                         <div class="section__settings">
                             <div class="settings-group">
@@ -491,7 +438,7 @@
                                 </span>
                                 <span class="label__hint hidden" data-visibility="keymap =none">
                                     GitLens won't bind any keyboard shortcuts. Configure your own via the
-                                    <a title="Open Keyboard Shortcuts" href="command:workbench.action.openGlobalKeybindings">Keyboard Shortcuts</a> editor</span>
+                                    <a class="command" title="Open Keyboard Shortcuts" href="command:workbench.action.openGlobalKeybindings">Keyboard Shortcuts</a> editor</span>
                             </div>
                         </div>
                     </section>
@@ -505,15 +452,15 @@
                                 <a href="#gitlens-view">GitLens View</a>
                             </li>
                             <li>
-                                <a href="#blame">Gutter Blame</a>
-                            </li>
-                            <li>
                                 <a href="#code-lens">Code Lens</a>
                             </li>
                             <li>
                                 <a href="#current-line">Current Line Blame</a>
                             </li>
                             <li>
+                                <a href="#blame">Gutter Blame</a>
+                            </li>
+                            <li>
                                 <a href="#hovers">Hovers</a>
                             </li>
                             <li>