Adds many more settings

Adds jump to menu to settings
Adds more content to the Welcome page
And more

.vscodeignore

@@ -1,10 +1,7 @@
 !images/dark/**
 !images/light/**
 !images/gitlens-icon.png
-!images/screenshot-line-blame-annotation.png
-!images/screenshot-code-lens.png
-!images/screenshot-status-bar.png
-!images/screenshot-git-custom-view-repository.png
+!images/settings-*.png
 images/**
 .vscode/**
 .vscode-test/**

src/ui/scss/main.scss

@@ -13,7 +13,7 @@ body {
 a {
     border: 0;
     color: var(--link-color);
-    font-weight: 400;
+    font-weight: 600;
     outline: none;
     text-decoration: none;
 
@@ -38,6 +38,14 @@ b {
     font-weight: 600;
 }
 
+code,
+.shortcut-key {
+    background-color: var(--background-color--lighten-15);
+    padding: 1px 5px;
+    vertical-align: bottom;
+    border-radius: 3px;
+}
+
 h1 {
     padding: 0;
     margin: 0;
@@ -59,7 +67,7 @@ header {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    margin-bottom: 3em;
+    margin-bottom: 1em;
 }
 
 input, select, button {
@@ -83,6 +91,11 @@ input {
         margin: -2px .25em 0 .25em;
         vertical-align: middle;
     }
+
+    &[disabled] {
+        color: var(--color--75);
+        cursor: default;
+    }
 }
 
 label {
@@ -117,6 +130,11 @@ select {
     .vscode-dark & {
         background-color: var(--background-color--lighten-05);
     }
+
+    &[disabled] {
+        color: var(--color--75);
+        cursor: default;
+    }
 }
 
 select option {
@@ -151,6 +169,12 @@ ul {
     width: 90%;
 }
 
+.features-list {
+    font-weight: 200;
+    list-style: disc;
+    margin-left: 2em;
+}
+
 .header__blurb {
     color: var(--color--75);
     flex: 55% 2 1;
@@ -158,6 +182,7 @@ ul {
     font-weight: 200;
     line-height: 1.3;
     margin: 0 0 0 6em;
+    min-width: 345px;
 
     @media all and (max-width: 880px) {
         margin: 0 2em;
@@ -178,7 +203,6 @@ ul {
     white-space: nowrap;
 }
 
-
 .icon {
     background-color: var(--color);
     width: 19px;
@@ -276,10 +300,25 @@ ul {
     }
 }
 
+.page-header {
+    margin: 1em 0 2em 0;
+}
+
+.page-header__title {
+    font-size: 3em;
+    margin: 0;
+}
+
+.page-header__subtitle {
+    color: var(--color--50);
+    margin: 0;
+}
+
 .section__preview {
     flex: 40% 1 1;
     text-align: end;
-    min-width: 300px;
+    margin-left: 1em;
+    min-width: 400px;
 }
 
 .section__settings {
@@ -308,30 +347,53 @@ ul {
     margin: 0.25em 0;
 }
 
-.section__welcome {
-    margin: 1em 0;
+.section-group__content {
+    min-width: 0;
+}
+
+.section-group__sidebar {
+    align-self: flex-start;
+    position: sticky;
+    margin: -1em 0 0 3em;
+    top: 0;
+
+    a {
+        font-weight: 400;
+    }
+
+    li {
+        white-space: nowrap;
+    }
+}
+
+.section-group__sidebar--settings {
+    @media all and (max-width: 860px) {
+        display: none;
+    }
+}
+
+.section-group__sidebar--welcome {
+    margin-right: 3em;
 
+    @media all and (max-width: 560px) {
+        display: none;
+    }
+}
+
+.section-group-section {
     p {
         font-size: 1.1em;
         font-weight: 200;
         margin: 1em 0.25em;
-        max-width: calc(475px - 0.5em);
         line-height: 1.275;
     }
 }
 
-.section-group__main {
-    min-width: 0;
-}
-
-.section-group__sidebar {
-    margin-left: 3em;
-}
-
 .section-groups {
     display: flex;
     justify-content: space-around;
-    margin: 0 1em;
+    margin-top: -1em;
+    margin-bottom: 50%;
 }
 
 .settings-group {
@@ -342,8 +404,27 @@ ul {
 
 .settings-group__setting {
     margin-bottom: 1em;
+
+    &[disabled] {
+        label {
+            color: var(--color--75);
+            cursor: default;
+        }
+    }
+}
+
+.settings-group__setting--nested {
+    margin-left: 2em;
+}
+
+.settings-group__setting--nested2 {
+    margin-left: 4em;
 }
 
 .sidebar-group {
     margin-top: 1em;
-}
+}
+
+[data-visibility][hidden] {
+    display: none;
+}

src/ui/settings/app.ts

@@ -37,15 +37,7 @@ export class App {
         }
         changes[element.name] = value;
 
-        for (const el of document.querySelectorAll<HTMLInputElement | HTMLSelectElement>(`[data-readonly="${element.name}"]`)) {
-            if (el.tagName === 'SELECT') {
-                el.disabled = !value;
-            }
-            else {
-                (el as HTMLInputElement).readOnly = !value;
-            }
-        }
-
+        this.updateState(element.name, !!value);
         this.applyChanges();
     }
 
@@ -56,6 +48,7 @@ export class App {
 
         changes[element.name] = value;
 
+        this.updateState(element.name, value);
         this.applyChanges();
     }
 
@@ -79,23 +72,85 @@ export class App {
     private initializeState() {
         console.log('SettingsApp.initializeState');
 
-        DOM.getElementById<HTMLInputElement>(`blame.line.enabled`).checked = config.blame.line.enabled;
-        let element = DOM.getElementById<HTMLSelectElement>(`blame.line.annotationType`)!;
-        element.querySelector<HTMLOptionElement>(`option[value='${config.blame.line.annotationType}']`)!.selected = true;
-        if (config.blame.line.enabled) {
-            element.disabled = false;
+        for (const el of document.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')) {
+            const name = el.name;
+
+            const checked = getSettingValue<boolean>(name);
+            el.checked = checked;
+
+            this.updateState(name, checked);
         }
 
-        DOM.getElementById<HTMLInputElement>(`statusBar.enabled`).checked = config.statusBar.enabled;
+        for (const el of document.querySelectorAll<HTMLSelectElement>('select')) {
+            const name = el.name;
 
-        DOM.getElementById<HTMLInputElement>(`codeLens.enabled`).checked = config.codeLens.enabled;
+            const value = getSettingValue<string>(name);
 
-        DOM.getElementById<HTMLInputElement>(`gitExplorer.enabled`).checked = config.gitExplorer.enabled;
+            el.querySelector<HTMLOptionElement>(`option[value='${value}']`)!.selected = true;
 
-        element = DOM.getElementById<HTMLSelectElement>(`gitExplorer.view`)!;
-        element.querySelector<HTMLOptionElement>(`option[value='${config.gitExplorer.view}']`)!.selected = true;
+            this.updateState(name, value);
+        }
+    }
 
-        element = DOM.getElementById<HTMLSelectElement>(`keymap`)!;
-        element.querySelector<HTMLOptionElement>(`option[value='${config.keymap}']`)!.selected = true;
+    private updateState(setting: string, value: string | boolean) {
+        this.updateEnablement(setting, value);
+        this.updateVisibility(setting, value);
+    }
+
+    private updateEnablement(setting: string, value: string | boolean) {
+        for (const el of document.querySelectorAll<HTMLElement>(`[data-enablement~="${setting}"]`)) {
+            const enabled = evaluateExpression(el.dataset.enablement!, setting, value);
+            if (enabled) {
+                el.removeAttribute('disabled');
+            }
+            else {
+                el.setAttribute('disabled', '');
+            }
+
+            const input = el.querySelector<HTMLInputElement | HTMLSelectElement>('input,select');
+            if (input == null) continue;
+
+            input.disabled = !enabled;
+        }
     }
+
+    private updateVisibility(setting: string, value: string | boolean) {
+        for (const el of document.querySelectorAll<HTMLElement>(`[data-visibility~="${setting}"]`)) {
+            const visible = evaluateExpression(el.dataset.visibility!, setting, value);
+            if (visible) {
+                el.removeAttribute('hidden');
+            }
+            else {
+                el.setAttribute('hidden', '');
+            }
+        }
+    }
+}
+
+function evaluateExpression(expression: string, setting: string, settingValue: string | boolean): boolean {
+    let state = false;
+    for (const expr of expression.trim().split('&&')) {
+        const [lhs, rhs] = parseExpression(expr);
+
+        const value = lhs !== setting
+            ? getSettingValue<string | boolean>(lhs)
+            : settingValue;
+        state = rhs !== undefined ? rhs === '' + value : !!value;
+
+        if (!state) break;
+    }
+    return state;
+}
+
+function get<T>(o: { [key: string ]: any}, path: string): T {
+    return path.split('.').reduce((o = {}, key) => o[key], o) as T;
+}
+
+function getSettingValue<T>(path: string): T {
+    return get<T>(config, path);
 }
+
+function parseExpression(expression: string): [string, string | boolean | undefined] {
+    const [lhs, rhs] = expression.trim().split('=');
+    return [lhs.trim(), rhs !== undefined ? rhs.trim() : rhs];
+}

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>
@@ -18,119 +18,285 @@
                     </div>
                 </div>
                 <p class="header__blurb">
-                    GitLens <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to <b>visualize code authorship</b> at a glance via Git blame annotations and code lens, <b>seamlessly navigate and explore</b> Git repositories, <b>gain valuable insights</b> via powerful comparison commands, and so much more.
+                    GitLens
+                    <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to
+                    <b>visualize code authorship</b> at a glance via Git blame annotations and code lens,
+                    <b>seamlessly navigate and explore</b> Git repositories,
+                    <b>gain valuable insights</b> via powerful comparison commands, and so much more.
                 </p>
             </header>
 
-            <section>
-                <div class="section__header">
-                    <h2 class="section__title">Line Annotations <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 an unobtrusive Git blame annotation to the end of the current line</p>
-                </div>
-                <div class="section__settings">
-                    <div class="settings-group">
-                        <div class="settings-group__setting">
-                            <input id="blame.line.enabled" name="blame.line.enabled" type="checkbox"></input>
-                            <label for="blame.line.enabled">Show Git blame annotations for the current line</label>
-                            <select id="blame.line.annotationType" name="blame.line.annotationType" data-readonly="blame.line.enabled" disabled>
+            <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>
+                </p>
+            </div>
+
+            <div class="section-groups">
+                <div class="section-group__content">
+
+                    <section id="gitlens-view">
+                        <div class="section__header">
+                            <h2 class="section__title">GitLens View
+                                <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#navigate-and-explore">
+                                    <i class="icon icon__info"></i>
+                                </a>
+                            </h2>
+                            <p class="section__title-hint">Adds a GitLens view to the Explorer activity to explore repositories or file histories</p>
+                        </div>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <input id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox"></input>
+                                    <label for="gitExplorer.enabled">Show the GitLens view</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="gitExplorer.enabled" disabled>
+                                    <label for="gitExplorer.view">Show the </label>
+                                    <select id="gitExplorer.view" name="gitExplorer.view" disabled>
+                                        <option value="auto">last selected view</option>
+                                        <option value="repository">repository view</option>
+                                        <option value="history">file history view</option>
+                                    </select>
+                                    <label for="gitExplorer.view"> when the GitLens explorer opens</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="gitExplorer.enabled" disabled>
+                                    <input id="gitExplorer.avatars" name="explorers.avatars" type="checkbox" disabled></input>
+                                    <label for="gitExplorer.avatars">Use author avatars in place of commit icons</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="gitExplorer.enabled" disabled>
+                                    <input id="gitExplorer.autoRefresh" name="gitExplorer.autoRefresh" type="checkbox" disabled></input>
+                                    <label for="gitExplorer.autoRefresh">Automatically refresh the GitLens view when any repository or the file system changes</label>
+                                </div>
+                            </div>
+                            <div class="section__preview">
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; gitExplorer.gravatars =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; gitExplorer.gravatars"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository &amp;&amp; gitExplorer.gravatars =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-repository-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =repository &amp;&amp; gitExplorer.gravatars"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-history.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history &amp;&amp; gitExplorer.gravatars =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-gitlens-view-history-avatars.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =history &amp;&amp; gitExplorer.gravatars"></img>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section id="code-lens">
+                        <div class="section__header">
+                            <h2 class="section__title">Code Lens
+                                <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#git-code-lens">
+                                    <i class="icon icon__info"></i>
+                                </a>
+                            </h2>
+                            <p class="section__title-hint">Adds Git authorship code lens to the top of the file and on code blocks</p>
+                        </div>
+                        <p></p>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <input id="codeLens.enabled" name="codeLens.enabled" type="checkbox"></input>
+                                    <label for="codeLens.enabled">Show the Git authorship code lenses</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="codeLens.enabled" disabled>
+                                    <input id="codeLens.recentChange.enabled" name="codeLens.recentChange.enabled" type="checkbox"></input>
+                                    <label for="codeLens.recentChange.enabled">Show the author and date of the most recent change for the file or code block</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested2" data-enablement="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled" disabled>
+                                    <label for="codeLens.recentChange.command">Clicking on the recent change code lens will </label>
+                                    <select id="codeLens.recentChange.command" name="codeLens.recentChange.command" disabled>
+                                        <option value="gitlens.toggleFileBlame">toggle file blame annotations</option>
+                                        <option value="gitlens.diffWithPrevious">compare the commit with the previous</option>
+                                        <option value="gitlens.showQuickCommitDetails">show details of the commit</option>
+                                        <option value="gitlens.showQuickCommitFileDetails">show file details of the commit</option>
+                                        <option value="gitlens.showQuickFileHistory">show the current file history</option>
+                                        <option value="gitlens.showQuickRepoHistory">show the current branch history</option>
+                                    </select>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="codeLens.enabled" disabled>
+                                    <input id="codeLens.authors.enabled" name="codeLens.authors.enabled" type="checkbox"></input>
+                                    <label for="codeLens.authors.enabled">Show the number of authors of the file or code block and the most prominent author, if there is more than one</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested2" data-enablement="codeLens.enabled &amp;&amp; codeLens.authors.enabled" disabled>
+                                    <label for="codeLens.authors.command">Clicking on the authors code lens will </label>
+                                    <select id="codeLens.authors.command" name="codeLens.authors.command" disabled>
+                                        <option value="gitlens.toggleFileBlame">toggle file blame annotations</option>
+                                        <option value="gitlens.diffWithPrevious">compare the commit with the previous</option>
+                                        <option value="gitlens.showQuickCommitDetails">show details of the commit</option>
+                                        <option value="gitlens.showQuickCommitFileDetails">show file details of the commit</option>
+                                        <option value="gitlens.showQuickFileHistory">show the current file history</option>
+                                        <option value="gitlens.showQuickRepoHistory">show the current branch history</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="section__preview">
+                                <img class="image__preview" src="{{root}}/images/settings-code-lens.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-code-lens-off.png" data-visibility="codeLens.enabled =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-code-lens-recent.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled &amp;&amp; codeLens.authors.enabled =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-code-lens-authors.png" data-visibility="codeLens.enabled &amp;&amp; codeLens.recentChange.enabled =false &amp;&amp; codeLens.authors.enabled"></img>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section id="current-line">
+                        <div class="section__header">
+                            <h2 class="section__title">Current Line 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 an unobtrusive Git blame annotation to the end of the current line</p>
+                        </div>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <input id="blame.line.enabled" name="blame.line.enabled" type="checkbox"></input>
+                                    <label for="blame.line.enabled">Show a Git blame annotation at the end of the current line</label>
+                                    <!-- <select id="blame.line.annotationType" name="blame.line.annotationType" data-enablement="blame.line.enabled" disabled>
                                 <option value="trailing">at the end of the line</option>
                                 <option value="hover">on hover</option>
-                            </select>
+                            </select> -->
+                                </div>
+                            </div>
+                            <div class="section__preview">
+                                <img class="image__preview" src="{{root}}/images/settings-current-line-blame.png" data-visibility="blame.line.enabled"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-current-line-blame-off.png" data-visibility="blame.line.enabled =false"></img>
+                            </div>
                         </div>
-                    </div>
-                    <div class="section__preview">
-                        <img class="image__preview" src="{{root}}/images/screenshot-line-blame-annotation.png"></img>
-                    </div>
-                </div>
-            </section>
+                    </section>
 
-            <section>
-                <div class="section__header">
-                    <h2 class="section__title">Code Lens <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#git-code-lens"><i class="icon icon__info"></i></a></h2>
-                    <p class="section__title-hint">Adds Git authorship code lens to the top of the file and on code blocks</p>
-                </div>
-                <p></p>
-                <div class="section__settings">
-                    <div class="settings-group">
-                        <div class="settings-group__setting">
-                            <input id="codeLens.enabled" name="codeLens.enabled" type="checkbox"></input>
-                            <label for="codeLens.enabled">Show Git Code Lens</label>
+                    <section id="hovers">
+                        <div class="section__header">
+                            <h2 class="section__title">Hovers
+                                <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 detailed Git blame information accessible via hovers</p>
                         </div>
-                    </div>
-                    <div class="section__preview">
-                        <img class="image__preview" src="{{root}}/images/screenshot-code-lens.png"></img>
-                    </div>
-                </div>
-            </section>
-
-            <section>
-                <div class="section__header">
-                    <h2 class="section__title">Status Bar <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 information about the current line to the status bar</p>
-                </div>
-                <div class="section__settings">
-                    <div class="settings-group">
-                        <div class="settings-group__setting">
-                            <input id="statusBar.enabled" name="statusBar.enabled" type="checkbox"></input>
-                            <label for="statusBar.enabled">Show Git blame information in the status bar</label>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <p>Coming soon</p>
+                                    <!-- <input id="blame.line.enabled" name="blame.line.enabled" type="checkbox"></input>
+                            <label for="blame.line.enabled">Show a Git blame annotation at the end of the current line</label> -->
+                                </div>
+                            </div>
+                            <div class="section__preview">
+                                <!-- <img class="image__preview" src="{{root}}/images/settings-hover.png"></img> -->
+                            </div>
                         </div>
-                    </div>
-                    <div class="section__preview">
-                        <img class="image__preview" src="{{root}}/images/screenshot-status-bar.png"></img>
-                    </div>
-                </div>
-            </section>
+                    </section>
 
-            <section>
-                <div class="section__header">
-                    <h2 class="section__title">GitLens Explorer <a title="Learn more" href="https://github.com/eamodio/vscode-gitlens#navigate-and-explore"><i class="icon icon__info"></i></a></h2>
-                    <p class="section__title-hint">Adds a GitLens view to the Explorer activity to explore repositories or file histories</p>
-                </div>
-                <p></p>
-                <div class="section__settings">
-                    <div class="settings-group">
-                        <div class="settings-group__setting">
-                            <input id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox"></input>
-                            <label for="gitExplorer.enabled">Show the GitLens explorer</label>
+                    <section id="status-bar">
+                        <div class="section__header">
+                            <h2 class="section__title">Status Bar 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 a Git blame annotation about the current line to the status bar</p>
                         </div>
-                        <div class="settings-group__setting">
-                            <label for="gitExplorer.view">Start the GitLens explorer in</label>
-                            <select id="gitExplorer.view" name="gitExplorer.view">
-                                <option value="auto">the last selected view</option>
-                                <option value="repository">repository view</option>
-                                <option value="history">file history view</option>
-                            </select>
-                            <!-- <label class="label__hint" for="gitExplorer.view">Search for <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</label> -->
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <input id="statusBar.enabled" name="statusBar.enabled" type="checkbox"></input>
+                                    <label for="statusBar.enabled">Show a Git blame annotation for the current line in the status bar</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="statusBar.enabled" disabled>
+                                    <label for="statusBar.alignment">Position the annotation on the </label>
+                                    <select id="statusBar.alignment" name="statusBar.alignment" disabled>
+                                        <option value="left">left side</option>
+                                        <option value="right">right side</option>
+                                    </select>
+                                    <label for="statusBar.alignment"> of the status bar</label>
+                                </div>
+                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="statusBar.enabled" disabled>
+                                    <label for="statusBar.command">Clicking on the status bar item will </label>
+                                    <select id="statusBar.command" name="statusBar.command" disabled>
+                                        <option value="gitlens.toggleFileBlame">toggle file blame annotations</option>
+                                        <option value="gitlens.diffWithPrevious">compare the current line revision with the previous</option>
+                                        <option value="gitlens.diffWithWorking">compare the current line revision with the working file</option>
+                                        <option value="gitlens.toggleCodeLens">toggle the Git code lens</option>
+                                        <option value="gitlens.showQuickCommitDetails">show details of the commit</option>
+                                        <option value="gitlens.showQuickCommitFileDetails">show file details of the commit</option>
+                                        <option value="gitlens.showQuickFileHistory">show the current file history</option>
+                                        <option value="gitlens.showQuickRepoHistory">show the current branch history</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="section__preview">
+                                <img class="image__preview" src="{{root}}/images/settings-status-bar-off.png" data-visibility="statusBar.enabled =false"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-status-bar-left.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =left"></img>
+                                <img class="image__preview" src="{{root}}/images/settings-status-bar-right.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =right"></img>
+                            </div>
                         </div>
-                    </div>
-                    <div class="section__preview">
-                        <img class="image__preview" src="{{root}}/images/screenshot-git-custom-view-repository.png"></img>
-                    </div>
-                </div>
-            </section>
+                    </section>
 
-            <section>
-                <div class="section__header">
-                    <h2 class="section__title">Keyboard Shortcuts</h2>
+                    <section id="shortcuts">
+                        <div class="section__header">
+                            <h2 class="section__title">Keyboard Shortcuts</h2>
+                            <p class="section__title-hint">Search for
+                                <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>
+                        </div>
+                        <div class="section__settings">
+                            <div class="settings-group">
+                                <label for="keymap">Use </label>
+                                <select id="keymap" name="keymap">
+                                    <option value="standard">the default set of</option>
+                                    <option value="chorded">a chorded set of</option>
+                                    <option value="none">no</option>
+                                </select>
+                                <label for="keymap"> keyboard shortcuts</label>
+                                <span class="label__hint" data-visibility="keymap =standard">
+                                    <span class="shortcut-key">Alt</span>
+                                    based shortcuts. Not great for non-English keyboard layouts
+                                </span>
+                                <span class="label__hint" data-visibility="keymap =chorded">
+                                    Chorded shortcuts that start with
+                                    <i class="shortcut-key">Ctrl+Shift+G</i> (
+                                    <i class="shortcut-key">⌥⌘G</i> on macOS). Better for non-English keyboard layouts
+                                </span>
+                                <span class="label__hint" 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>
+                            </div>
+                        </div>
+                    </section>
                 </div>
-                <div class="section__settings">
-                    <div class="settings-group">
-                        <label for="keymap">Choose which set of keyboard shortcuts to use:</label>
-                        <select id="keymap" name="keymap">
-                            <option value="standard">standard shortcuts (<code>Alt</code> based)</option>
-                            <option value="chorded">chorded shortcuts (<code>Ctrl+Alt+G`</code> based)</option>
-                            <option value="none">no shortcuts</option>
-                        </select>
-                        <label class="label__hint" for="keymap">Search for <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</label>
+                <div class="section-group__sidebar section-group__sidebar--settings">
+                    <div class="sidebar-group">
+                        <h2>Jump to</h2>
+                        <ul>
+                            <li>
+                                <a href="#gitlens-view">GitLens View</a>
+                            </li>
+                            <li>
+                                <a href="#code-lens">Code Lens</a>
+                            </li>
+                            <li>
+                                <a href="#current-line">Current Line Blame</a>
+                            </li>
+                            <li>
+                                <a href="#hovers">Hovers</a>
+                            </li>
+                            <li>
+                                <a href="#status-bar">Status Bar Blame</a>
+                            </li>
+                            <li>
+                                <a href="#shortcuts">Keyboard Shortcuts</a>
+                            </li>
+                        </ul>
                     </div>
                 </div>
-            </section>
+            </div>
         </div>
-    </div>
 
-    <a id="commandRelay" style="display: none"></a>
-    <script type="text/javascript">
-        window.gitlens = { config: '{{config}}' };
-    </script>
+        <a id="commandRelay" style="display: none"></a>
+        <script type="text/javascript">
+            window.gitlens = { config: '{{config}}' };
+        </script>
 </body>
+
 </html>

src/ui/welcome/index.html

@@ -18,62 +18,142 @@
                     </div>
                 </div>
                 <p class="header__blurb">
-                    GitLens <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to <b>visualize code authorship</b> at a glance via Git blame annotations and code lens, <b>seamlessly navigate and explore</b> Git repositories, <b>gain valuable insights</b> via powerful comparison commands, and so much more.
+                    GitLens
+                    <b>supercharges</b> the Git capabilities built into Visual Studio Code. It helps you to
+                    <b>visualize code authorship</b> at a glance via Git blame annotations and code lens,
+                    <b>seamlessly navigate and explore</b> Git repositories,
+                    <b>gain valuable insights</b> via powerful comparison commands, and so much more.
                 </p>
             </header>
 
+            <div class="page-header">
+                <h2 class="page-header__title">Welcome</h2>
+                <p class="page-header__subtitle">Thank you for taking the time to try GitLens!</p>
+            </div>
+
             <div class="section-groups">
-                <div class="section-group__main">
-                    <div class="section__welcome">
-                        <h2>Welcome</h2>
+                <div class="section-group__content">
+                    <div class="section-group-section">
                         <p>
-                            Thank you for taking the time to try GitLens!
-                            <br />
-                            GitLens is powerful, feature rich, and highly configurable, so please be sure to open the <a title="Open GitLens Settings" href="command:gitlens.showSettingsPage">GitLens settings page</a> to tailor it to suit your needs.
+                            GitLens simply helps you understand code better. Quickly glimpse into who, why, and when a line or code block was changed.
+                            Jump back through history to gain further insights as to how and why the code evolved. Explore
+                            the history and evolution of a codebase. Dive in and see how GitLens can help!
                         </p>
                     </div>
-                    <div class="section__customize">
+                    <div class="section-group-section">
+                        <h2>Features</h2>
+                        <p>Here are just some of the features that GitLens provides
+                            <ul class="features-list">
+                                <li>Adds a GitLens view to the Explorer activity to explore repositories or file histories</li>
+                                <li>Adds Git authorship code lens to the top of the file and on code blocks</li>
+                                <li>Adds an unobtrusive Git blame annotation to the end of the current line</li>
+                                <li>Adds detailed Git blame information accessible via hovers</li>
+                                <li>Adds a Git blame annotation about the current line to the status bar</li>
+                                <li>Adds many powerful commands for exploring commits and histories, comparing and navigating
+                                    revisions, stash access, repository status, and more</li>
+                            </ul>
+                        </p>
+                        <p>GitLens is powerful, feature rich, and highly customizable to meet your specific needs, so please
+                            be sure to visit the
+                            <a title="Open GitLens Settings" href="command:gitlens.showSettingsPage">GitLens settings page</a>.</p>
+                    </div>
+                    <div class="section-group-section">
                         <h2>Customize</h2>
                         <ul>
-                            <li><button class="list-button" data-href="command:gitlens.showSettingsPage"><h3>Open GitLens Settings</h3><span class="detail">Customize common GitLens settings in an easy to use editor</span></button></li>
-                            <li><button class="list-button" data-href="command:workbench.action.openGlobalSettings"><h3>Open User Settings</h3> <span class="detail">Search for <b><i>gitlens</i></b> to see and customize all GitLens settings</span></button></li>
-                            <li><button class="list-button" data-href="command:workbench.action.openGlobalKeybindings"><h3>Open Keyboard Shortcuts</h3> <span class="detail">Search for <b><i>gitlens</i></b> to see and customize GitLens keyboard shortcuts</span></button></li>
+                            <li>
+                                <button class="list-button" data-href="command:gitlens.showSettingsPage">
+                                    <h3>Open GitLens Settings</h3>
+                                    <span class="detail" title="Customize common GitLens settings in an easy to use editor">Customize common GitLens settings in an easy to use editor</span>
+                                </button>
+                            </li>
+                            <li>
+                                <button class="list-button" data-href="command:workbench.action.openGlobalSettings">
+                                    <h3>Open User Settings</h3>
+                                    <span class="detail" title="Find and customize all GitLens settings">Search for
+                                        <b>
+                                            <i>gitlens</i>
+                                        </b> to find and customize all GitLens settings</span>
+                                </button>
+                            </li>
+                            <li>
+                                <button class="list-button" data-href="command:workbench.action.openGlobalKeybindings">
+                                    <h3>Open Keyboard Shortcuts</h3>
+                                    <span class="detail" title="Find and customize GitLens keyboard shortcuts">Search for
+                                        <b>
+                                            <i>gitlens</i>
+                                        </b> to find and customize GitLens keyboard shortcuts</span>
+                                </button>
+                            </li>
                         </ul>
                     </div>
-                    <div class="section__learn">
+                    <div class="section-group-section">
                         <h2>Learn</h2>
                         <ul>
-                            <li class="showCommands"><button class="list-button" data-href="command:workbench.action.showCommands"><h3>Find and run all GitLens commands</h3><span class="detail">Search for <b><i>gitlens</i></b> to access and search for GitLens commands from the Command Palette</span></button></li>
+                            <li class="showCommands">
+                                <button class="list-button" data-href="command:workbench.action.showCommands">
+                                    <h3>Find and run all GitLens commands</h3>
+                                    <span class="detail" title="Find and access GitLens commands from the Command Palette">Search for
+                                        <b>
+                                            <i>gitlens</i>
+                                        </b> to find and access GitLens commands from the Command Palette</span>
+                                </button>
+                            </li>
                         </ul>
                     </div>
                 </div>
-                <div class="section-group__sidebar">
-                    <div class="sidebar-group sidebar-group__show-support">
+                <div class="section-group__sidebar section-group__sidebar--welcome">
+                    <div class="sidebar-group">
                         <h2>Show Your Support</h2>
                         <ul>
-                            <li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details">Write a Review</a></li>
-                            <li><a href="https://github.com/eamodio/vscode-gitlens">Star or Fork me on GitHub</a></li>
-                            <li><a href="https://twitter.com/eamodio">Follow me on Twitter</a></li>
+                            <li>
+                                <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details">Write a Review</a>
+                            </li>
+                            <li>
+                                <a href="https://github.com/eamodio/vscode-gitlens">Star or Fork me on GitHub</a>
+                            </li>
+                            <li>
+                                <a href="https://twitter.com/eamodio">Follow me on Twitter</a>
+                            </li>
                             <!-- <li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens#review-details">Become a Patron</a></li> -->
-                            <li><a href="http://amod.io">Hire me</a></li>
+                            <li>
+                                <a href="http://amod.io">Hire me</a>
+                            </li>
                         </ul>
                     </div>
-                    <div class="sidebar-group sidebar-group__help">
+                    <div class="sidebar-group">
                         <h2>Help</h2>
                         <ul>
-                            <li><a href="https://github.com/eamodio/vscode-gitlens/blob/master/README.md">Documentation</a></li>
-                            <li><a href="https://github.com/eamodio/vscode-gitlens/issues">Questions &amp; Issues</a></li>
-                            <li><a href="https://join.slack.com/t/vscode-dev-community/shared_invite/enQtMjIxOTgxNDE3NzM0LWU5M2ZiZDU1YjBlMzdlZjA2YjBjYzRhYTM5NTgzMTAxMjdiNWU0ZmQzYWI3MWU5N2Q1YjBiYmQ4MzY0NDE1MzY">Slack</a><small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens channel</small></li>
-                            <li><a href="https://twitter.com/eamodio">Twitter</a><small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens hashtag</small></li>
+                            <li>
+                                <a href="https://github.com/eamodio/vscode-gitlens/blob/master/README.md">Documentation</a>
+                            </li>
+                            <li>
+                                <a href="https://github.com/eamodio/vscode-gitlens/issues">Questions &amp; Issues</a>
+                            </li>
+                            <li>
+                                <a href="https://join.slack.com/t/vscode-dev-community/shared_invite/enQtMjIxOTgxNDE3NzM0LWU5M2ZiZDU1YjBlMzdlZjA2YjBjYzRhYTM5NTgzMTAxMjdiNWU0ZmQzYWI3MWU5N2Q1YjBiYmQ4MzY0NDE1MzY">Slack</a>
+                                <small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens channel</small>
+                            </li>
+                            <li>
+                                <a href="https://twitter.com/eamodio">Twitter</a>
+                                <small> &nbsp;&nbsp;&mdash;&nbsp; #gitlens hashtag</small>
+                            </li>
                         </ul>
                     </div>
-                    <div class="sidebar-group sidebar-group__resources">
+                    <div class="sidebar-group">
                         <h2>Resources</h2>
                         <ul>
-                            <li><a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/changelog">Changelog</a></li>
-                            <li><a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Marketplace</a></li>
-                            <li><a href="https://github.com/eamodio/vscode-gitlens">GitHub</a></li>
-                            <li><a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/license">License</a></li>
+                            <li>
+                                <a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/changelog">Changelog</a>
+                            </li>
+                            <li>
+                                <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Marketplace</a>
+                            </li>
+                            <li>
+                                <a href="https://github.com/eamodio/vscode-gitlens">GitHub</a>
+                            </li>
+                            <li>
+                                <a href="https://marketplace.visualstudio.com/items/eamodio.gitlens/license">License</a>
+                            </li>
                         </ul>
                     </div>
                 </div>
@@ -82,4 +162,5 @@
     </div>
     <a id="commandRelay" style="display: none"></a>
 </body>
+
 </html>