Optimizes images

Moves settings images into a settings folder
Adds hover setting images
Updates dependencies

.gitignore

@@ -2,3 +2,4 @@ out
 node_modules
 settings.html
 welcome.html
+images/settings

.vscodeignore

@@ -1,7 +1,7 @@
 !images/dark/**
 !images/light/**
+!images/settings/**
 !images/gitlens-icon.png
-!images/settings-*.png
 images/**
 .vscode/**
 .vscode-test/**

package.json

@@ -10,8 +10,8 @@
         "vscode": "^1.19.0"
     },
     "license": "SEE LICENSE IN LICENSE",
-    "displayName": "Git Lens \u2014 git blame annotations, code lens, and more",
-    "description": "Supercharge Visual Studio Code's Git capabilities \u2014 Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore the history of a file or branch, gain valuable insights via powerful comparison commands, and so much more",
+    "displayName": "GitLens \u2014 git supercharged",
+    "description": "Supercharge Visual Studio Code's Git capabilities \u2014 Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more",
     "badges": [
         {
             "url": "https://img.shields.io/badge/vscode--dev--community-gitlens-blue.svg?logo=slack",
@@ -1073,7 +1073,7 @@
             }
         ],
         "commands": [
-           {
+            {
                 "command": "gitlens.showSettingsPage",
                 "title": "Open Settings",
                 "category": "GitLens"
@@ -3241,18 +3241,18 @@
         "*"
     ],
     "scripts": {
-        "build": "npm run lint && tsc -m commonjs -p ./ && npm run build-ui",
+        "build": "npm run lint && tsc -m commonjs -p ./ && npm run build-ui -- --env.quick",
         "build-ui": "webpack --context ./src/ui --config ./src/ui/webpack.config.js",
         "bundle": "npm run lint && webpack --env.production --context ./src/ui --config ./src/ui/webpack.config.js && webpack --env.production",
         "clean": "git clean -Xdf",
         "lint": "tslint --project tslint.json",
         "pack": "vsce package",
         "pub": "vsce publish",
-        "rebuild": "npm run reset && npm run build",
+        "rebuild": "npm run reset && npm run lint && tsc -m commonjs -p ./ && npm run build-ui",
         "reset": "npm run clean && npm install --no-save",
         "watch": "tsc -watch -p ./",
 
-        "postinstall": "node ./node_modules/vscode/bin/install",
+        "postinstall": "node ./node_modules/vscode/bin/install && pushd \"./src/ui\" && npm install --no-save && popd",
         "prepush": "npm run build",
         "vscode:prepublish": "npm run reset && npm run bundle"
     },

src/pageProvider.ts

@@ -34,9 +34,7 @@ export class PageProvider extends Disposable implements TextDocumentContentProvi
     async provideTextDocumentContent(uri: Uri): Promise<string> {
         const doc = await workspace.openTextDocument(Uri.file(Container.context.asAbsolutePath(`${uri.path}.html`)));
 
-        let text = doc.getText()
-            .replace(/{{root}}/g, Uri.file(Container.context.asAbsolutePath('.')).toString());
-
+        let text = doc.getText().replace(/{{root}}/g, Uri.file(Container.context.asAbsolutePath('.')).toString());
         if (text.includes('\'{{config}}\'')) {
             text = text.replace(/'{{config}}'/g, JSON.stringify(Container.config));
         }

src/system/object.ts

@@ -53,6 +53,22 @@ export namespace Objects {
         }
     }
 
+    export function paths(o: { [key: string]: any }, path?: string): string[] {
+        const results = [];
+
+        for (const key in o) {
+            const child = o[key];
+            if (typeof child === 'object') {
+                results.push(...paths(child, path === undefined ? key : `${path}.${key}`));
+            }
+            else {
+                results.push(path === undefined ? key : `${path}.${key}`);
+            }
+        }
+
+        return results;
+    }
+
     export function values<T>(o: { [key: string]: T }): IterableIterator<T>;
     export function values<T>(o: { [key: number]: T }): IterableIterator<T>;
     export function* values<T>(o: any): IterableIterator<T> {

src/ui/package.json

@@ -24,19 +24,20 @@
         "build-dev": "webpack"
     },
     "devDependencies": {
-        "@types/node": "9.3.0",
-        "@types/webpack": "3.8.2",
-        "css-loader": "0.28.8",
+        "@types/node": "9.4.0",
+        "@types/webpack": "3.8.4",
+        "css-loader": "0.28.9",
         "extract-text-webpack-plugin": "3.0.2",
         "html-webpack-inline-source-plugin": "0.0.9",
         "html-webpack-plugin": "2.30.1",
+        "imagemin-webpack-plugin": "2.0.0",
         "node-sass": "4.7.2",
         "sass-loader": "6.0.6",
-        "style-loader": "0.19.1",
+        "style-loader": "0.20.1",
         "tslint": "5.9.1",
-        "ts-loader": "3.2.0",
+        "ts-loader": "3.3.1",
         "typescript": "2.6.2",
-        "uglifyjs-webpack-plugin": "1.1.6",
+        "uglifyjs-webpack-plugin": "1.1.8",
         "webpack": "3.10.0"
     }
 }

src/ui/scss/main.scss

@@ -7,7 +7,7 @@ body {
     color: var(--color);
     font-family: var(--font-family);
     height: 100%;
-    line-height: 1.4em;
+    line-height: 1.4;
 }
 
 a {
@@ -89,10 +89,10 @@ input {
         outline: none;
     }
 
-    &[type="checkbox"] {
-        margin: -2px .25em 0 .25em;
-        vertical-align: middle;
-    }
+    // &[type="checkbox"] {
+    //     margin: -2px .25em 0 .25em;
+    //     vertical-align: middle;
+    // }
 
     &[disabled] {
         color: var(--color--75);
@@ -122,7 +122,7 @@ section {
 select {
     color: var(--color);
     cursor: pointer;
-    margin: 0.5em 0.25em 0 0.25em;
+    margin: 0 0.75em;
     padding: 2px;
 
     .vscode-light & {
@@ -174,7 +174,11 @@ ul {
 .features-list {
     font-weight: 200;
     list-style: disc;
-    margin-left: 2em;
+    margin: 0 0 2em 2em;
+
+    & li {
+        margin-bottom: 0.5em;
+    }
 }
 
 .header__blurb {
@@ -182,7 +186,7 @@ ul {
     flex: 55% 2 1;
     font-size: 1.2em;
     font-weight: 200;
-    line-height: 1.3;
+    // line-height: 1.35;
     margin: 0 0 0 6em;
     min-width: 345px;
 
@@ -325,7 +329,7 @@ ul {
 .section__preview {
     flex: 40% 1 1;
     text-align: end;
-    margin-left: 1em;
+    margin-left: 2em;
     min-width: 400px;
 }
 
@@ -393,7 +397,7 @@ ul {
         font-size: 1.1em;
         font-weight: 200;
         margin: 1em 0.25em;
-        line-height: 1.275;
+        // line-height: 1.275;
     }
 }
 
@@ -416,7 +420,25 @@ ul {
 }
 
 .settings-group__setting {
-    margin-bottom: 1em;
+    display: flex;
+    flex: auto 1 1;
+    align-items: baseline;
+    flex-wrap: wrap;
+    margin-bottom: 0.75em;
+
+    & input[type="checkbox"] {
+        flex: 16px 0 0;
+        margin: 0 0.75em 0 0;
+        width: 16px;
+        height: 16px;
+        top: 3px;
+        position: relative;
+    }
+
+    & label {
+        flex: auto 0 1;
+        margin-bottom: 0.75em;
+    }
 
     &[disabled] {
         label {
@@ -426,14 +448,6 @@ ul {
     }
 }
 
-.settings-group__setting--nested {
-    margin-left: 2em;
-}
-
-.settings-group__setting--nested2 {
-    margin-left: 4em;
-}
-
 .sidebar-group {
     margin-top: 1em;
 }
@@ -441,3 +455,19 @@ ul {
 .hidden {
     display: none !important;
 }
+
+.mb-2 {
+    margin-bottom: 2em !important;
+}
+
+.ml-2 {
+    margin-left: 2em;
+}
+
+.ml-4 {
+    margin-left: 4em;
+}
+
+.nowrap {
+    flex-wrap: nowrap !important;
+}

src/ui/settings/app.ts

@@ -40,7 +40,6 @@ export class App {
         }
 
         this.setAdditionalSettings(element.checked ? element.dataset.addSettingsOn : element.dataset.addSettingsOff);
-        this.updateState(this._changes);
         this.applyChanges();
     }
 
@@ -51,7 +50,6 @@ export class App {
 
         this._changes[element.name] = ensureIfBoolean(value);
 
-        this.updateState(this._changes);
         this.applyChanges();
     }
 
@@ -75,28 +73,23 @@ export class App {
     private initializeState() {
         console.log('SettingsApp.initializeState');
 
-        const changes: { [key: string]: string | boolean } = Object.create(null);
-
         for (const el of document.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')) {
             const name = el.name;
 
             const checked = name.startsWith('!') ? false : getSettingValue<boolean>(name);
             el.checked = checked;
-
-            changes[name] = checked;
         }
 
         for (const el of document.querySelectorAll<HTMLSelectElement>('select')) {
             const name = el.name;
 
             const value = getSettingValue<string>(name);
-
             el.querySelector<HTMLOptionElement>(`option[value='${value}']`)!.selected = true;
-
-            changes[name] = value;
         }
 
-        this.updateState(changes);
+        const state = flatten(config);
+        this.setVisibility(state);
+        this.setEnablement(state);
     }
 
     private setAdditionalSettings(expression: string | undefined) {
@@ -108,44 +101,31 @@ export class App {
         }
     }
 
-    private updateState(changes: { [key: string]: string | boolean }) {
-        this.updateVisibility(changes);
-        this.updateEnablement(changes);
-    }
+    private setEnablement(state: { [key: string]: string | boolean }) {
+        for (const el of document.querySelectorAll<HTMLElement>('[data-enablement]')) {
+            // Since everything starts disabled, kick out if it still is
+            if (!evaluateStateExpression(el.dataset.enablement!, state)) continue;
 
-    private updateEnablement(changes: { [key: string]: string | boolean }) {
-        const selectors = Object.keys(changes).map(c => `[data-enablement~="${c}"]`).join(',');
-        for (const el of document.querySelectorAll<HTMLElement>(selectors)) {
-            const enabled = evaluateStateExpression(el.dataset.enablement!, changes);
-            if (enabled) {
-                el.removeAttribute('disabled');
-            }
-            else {
-                el.setAttribute('disabled', '');
-            }
+            el.removeAttribute('disabled');
 
             if (el.matches('input,select')) {
-                (el as HTMLInputElement | HTMLSelectElement).disabled = !enabled;
+                (el as HTMLInputElement | HTMLSelectElement).disabled = false;
             }
             else {
                 const input = el.querySelector<HTMLInputElement | HTMLSelectElement>('input,select');
                 if (input == null) continue;
 
-                input.disabled = !enabled;
+                input.disabled = false;
             }
         }
     }
 
-    private updateVisibility(changes: { [key: string]: string | boolean }) {
-        const selectors = Object.keys(changes).map(c => `[data-visibility~="${c}"]`).join(',');
-        for (const el of document.querySelectorAll<HTMLElement>(selectors)) {
-            const visible = evaluateStateExpression(el.dataset.visibility!, changes);
-            if (visible) {
-                el.classList.remove('hidden');
-            }
-            else {
-                el.classList.add('hidden');
-            }
+    private setVisibility(state: { [key: string]: string | boolean }) {
+        for (const el of document.querySelectorAll<HTMLElement>('[data-visibility]')) {
+            // Since everything starts hidden, kick out if it still is
+            if (!evaluateStateExpression(el.dataset.visibility!, state)) continue;
+
+            el.classList.remove('hidden');
         }
     }
 }
@@ -191,4 +171,22 @@ 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 flatten(o: { [key: string]: any }, path?: string): { [key: string]: any } {
+    const results: { [key: string]: any } = {};
+
+    for (const key in o) {
+        const value = o[key];
+        if (Array.isArray(value)) continue;
+
+        if (typeof value === 'object') {
+            Object.assign(results, flatten(value, path === undefined ? key : `${path}.${key}`));
+        }
+        else {
+            results[path === undefined ? key : `${path}.${key}`] = value;
+        }
+    }
+
+    return results;
 }

src/ui/settings/index.html

@@ -11,7 +11,7 @@
         <div class="content">
             <header>
                 <div class="header__logo">
-                    <img class="image__logo" src="{{root}}/images/gitlens-icon.png">
+                    <img class="image__logo" src="{{root}}/images/gitlens-icon.png" />
                     <div>
                         <h1>GitLens</h1>
                         <p class="header__subtitle">Git supercharged</p>
@@ -46,35 +46,40 @@
                         </div>
                         <div class="section__settings">
                             <div class="settings-group">
-                                <div class="settings-group__setting">
-                                    <input id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox" class="p">></span></input>
+                                <div class="settings-group__setting nowrap">
+                                    <input id="gitExplorer.enabled" name="gitExplorer.enabled" type="checkbox" />
                                     <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>
+                                <div class="settings-group__setting ml-2" data-enablement="gitExplorer.enabled" disabled>
+                                    <label for="gitExplorer.view">When opening the GitLens view</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>
+                                        <option value="auto">show the last selected view</option>
+                                        <option value="repository">show the repository view</option>
+                                        <option value="history">show the 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 class="p">></span></input>
+                                <div class="settings-group__setting nowrap ml-2" data-enablement="gitExplorer.enabled" disabled>
+                                    <input id="gitExplorer.avatars" name="explorers.avatars" type="checkbox" disabled />
                                     <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 class="p">></span></input>
-                                    <label for="gitExplorer.autoRefresh">Automatically refresh the GitLens view when any repository or the file system changes</label>
+                                <div class="settings-group__setting nowrap ml-2" data-enablement="gitExplorer.enabled" disabled>
+                                    <input id="gitExplorer.autoRefresh" name="gitExplorer.autoRefresh" type="checkbox" disabled />
+                                    <label for="gitExplorer.autoRefresh">Automatically refresh the GitLens view when the file system or any repository changes</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings-gitlens-view-repository.png" data-visibility="gitExplorer.enabled &amp;&amp; gitExplorer.view =auto &amp;&amp; gitExplorer.avatars =false"></img>
-                                <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>
-                                <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>
-                                <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>
-                                <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>
-                                <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>
+                                <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"
+                                />
                             </div>
                         </div>
                     </section>
@@ -88,18 +93,18 @@
                             </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" class="p">></span></input>
+                                <div class="settings-group__setting nowrap">
+                                    <input id="codeLens.enabled" name="codeLens.enabled" type="checkbox" />
                                     <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>
+                                <div class="settings-group__setting nowrap ml-2" data-enablement="codeLens.enabled" disabled>
+                                    <input id="codeLens.recentChange.enabled" name="codeLens.recentChange.enabled" type="checkbox" disabled />
                                     <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>
+                                <div class="settings-group__setting ml-4" 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>
@@ -110,12 +115,13 @@
                                         <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>
+                                <div class="settings-group__setting nowrap ml-2" data-enablement="codeLens.enabled" disabled>
+                                    <input id="codeLens.authors.enabled" name="codeLens.authors.enabled" type="checkbox" disabled />
                                     <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>
+                                <div class="settings-group__setting ml-4" 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>
@@ -128,16 +134,21 @@
                                 </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>
-                                <img class="image__preview hidden" src="{{root}}/images/settings-code-lens-off.png" data-visibility="codeLens.enabled =false"></img>
-                                <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>
-                                <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>
-                                <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>
+                                <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"
+                                />
                             </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
+                                <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
                             </p>
                         </div>
                     </section>
@@ -153,19 +164,22 @@
                         </div>
                         <div class="section__settings">
                             <div class="settings-group">
-                                <div class="settings-group__setting">
-                                    <input id="currentLine.enabled" name="currentLine.enabled" type="checkbox" data-add-settings-off="hovers.currentLine.over=line"></input>
+                                <div class="settings-group__setting nowrap">
+                                    <input id="currentLine.enabled" name="currentLine.enabled" type="checkbox" data-add-settings-off="hovers.currentLine.over=line"
+                                    />
                                     <label for="currentLine.enabled">Show a Git blame annotation at the end of the current line</label>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <img class="image__preview hidden" src="{{root}}/images/settings-current-line-blame.png" data-visibility="currentLine.enabled"></img>
-                                <img class="image__preview hidden" src="{{root}}/images/settings-current-line-blame-off.png" data-visibility="currentLine.enabled =false"></img>
+                                <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"
+                                />
                             </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
+                                <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
                             </p>
                         </div>
@@ -183,54 +197,114 @@
                         <div class="section__settings">
                             <div class="settings-group">
                                 <div class="settings-group__setting">
-                                    <div class="settings-group__setting">
-                                        <input id="hovers.enabled" name="hovers.enabled" type="checkbox" class="p">></span></input>
+                                    <div class="settings-group__setting nowrap">
+                                        <input id="hovers.enabled" name="hovers.enabled" type="checkbox" />
                                         <label for="hovers.enabled">Show Git hovers</label>
                                     </div>
 
-                                    <div class="settings-group__setting settings-group__setting--nested hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled" disabled>
-                                        <input id="hovers.currentLine.enabled" name="hovers.currentLine.enabled" type="checkbox"></input>
-                                        <label for="hovers.currentLine.enabled">Show hovers for the current line over the </label>
-                                        <select id="hovers.currentLine.over" name="hovers.currentLine.over" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled" disabled>
-                                            <option value="annotation">annotation only</option>
-                                            <option value="line">whole line</option>
+                                    <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 />
+                                        <label for="hovers.currentLine.enabled">Show hovers for the current line when over the </label>
+                                        <select id="hovers.currentLine.over" name="hovers.currentLine.over" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled"
+                                            disabled>
+                                            <option value="annotation">annotation</option>
+                                            <option value="line">line</option>
                                         </select>
                                     </div>
-                                    <div class="settings-group__setting settings-group__setting--nested hidden" data-visibility="currentLine.enabled =false" data-enablement="hovers.enabled" disabled>
-                                        <input id="hovers.currentLine.enabled-1" name="hovers.currentLine.enabled" type="checkbox" data-add-settings-on="hovers.currentLine.over=line"></input>
+                                    <div class="settings-group__setting nowrap ml-2 hidden" data-visibility="currentLine.enabled =false"
+                                        data-enablement="hovers.enabled" disabled>
+                                        <input id="hovers.currentLine.enabled-1" name="hovers.currentLine.enabled" type="checkbox" data-add-settings-on="hovers.currentLine.over=line" disabled
+                                        />
                                         <label for="hovers.currentLine.enabled-1">Show hovers over the current line</label>
                                     </div>
 
-                                    <div class="settings-group__setting settings-group__setting--nested2" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled" disabled>
-                                        <input id="hovers.currentLine.details" name="hovers.currentLine.details" type="checkbox"></input>
+                                    <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled"
+                                        disabled>
+                                        <input id="hovers.currentLine.details" name="hovers.currentLine.details" type="checkbox" disabled />
                                         <label for="hovers.currentLine.details">Show Git blame details</label>
                                     </div>
-                                    <div class="settings-group__setting settings-group__setting--nested2" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled" disabled>
-                                        <input id="hovers.currentLine.changes" name="hovers.currentLine.changes" type="checkbox"></input>
+                                    <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp;&amp; hovers.currentLine.enabled"
+                                        disabled>
+                                        <input id="hovers.currentLine.changes" name="hovers.currentLine.changes" type="checkbox" disabled />
                                         <label for="hovers.currentLine.changes">Show Git changes (diff)</label>
                                     </div>
-
-                                    <div class="settings-group__setting settings-group__setting--nested" data-enablement="hovers.enabled" disabled>
-                                        <input id="hovers.annotations.enabled" name="hovers.annotations.enabled" type="checkbox"></input>
-                                        <label for="hovers.annotations.enabled">When annotating, show hovers over the </label>
-                                        <select id="hovers.annotations.over" name="hovers.annotations.over" data-enablement="hovers.enabled" disabled>
-                                            <option value="annotation">annotations only</option>
-                                            <option value="line">whole line</option>
+                                </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"
+                                />
+                            </div>
+                            <div class="settings-group">
+                                <div class="settings-group__setting">
+                                    <div class="settings-group__setting nowrap ml-2" data-enablement="hovers.enabled" disabled>
+                                        <input id="hovers.annotations.enabled" name="hovers.annotations.enabled" type="checkbox" disabled />
+                                        <label for="hovers.annotations.enabled">While annotating, show hovers when over the </label>
+                                        <select id="hovers.annotations.over" name="hovers.annotations.over" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled" disabled>
+                                            <option value="annotation">annotation</option>
+                                            <option value="line">line</option>
                                         </select>
                                     </div>
 
-                                    <div class="settings-group__setting settings-group__setting--nested2" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled" disabled>
-                                        <input id="hovers.annotations.details" name="hovers.annotations.details" type="checkbox"></input>
+                                    <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled"
+                                        disabled>
+                                        <input id="hovers.annotations.details" name="hovers.annotations.details" type="checkbox" disabled />
                                         <label for="hovers.annotations.details">Show Git blame details</label>
                                     </div>
-                                    <div class="settings-group__setting settings-group__setting--nested2" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled" disabled>
-                                        <input id="hovers.annotations.changes" name="hovers.annotations.changes" type="checkbox"></input>
+                                    <div class="settings-group__setting nowrap ml-4" data-enablement="hovers.enabled &amp;&amp; hovers.annotations.enabled"
+                                        disabled>
+                                        <input id="hovers.annotations.changes" name="hovers.annotations.changes" type="checkbox" disabled />
                                         <label for="hovers.annotations.changes">Show Git changes (diff)</label>
                                     </div>
                                 </div>
                             </div>
                             <div class="section__preview">
-                                <!-- <img class="image__preview" src="{{root}}/images/settings-hover.png"></img> -->
+                                <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"
+                                />
                             </div>
                         </div>
                     </section>
@@ -246,11 +320,11 @@
                         </div>
                         <div class="section__settings">
                             <div class="settings-group">
-                                <div class="settings-group__setting">
-                                    <input id="statusBar.enabled" name="statusBar.enabled" type="checkbox" class="p">></span></input>
+                                <div class="settings-group__setting nowrap">
+                                    <input id="statusBar.enabled" name="statusBar.enabled" type="checkbox" />
                                     <label for="statusBar.enabled">Show a Git blame annotation for the current line in the status bar</label>
                                 </div>
-                                <div class="settings-group__setting settings-group__setting--nested" data-enablement="statusBar.enabled" disabled>
+                                <div class="settings-group__setting ml-2" 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>
@@ -258,7 +332,7 @@
                                     </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>
+                                <div class="settings-group__setting ml-2" 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>
@@ -273,14 +347,17 @@
                                 </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>
-                                <img class="image__preview hidden" src="{{root}}/images/settings-status-bar-left.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =left"></img>
-                                <img class="image__preview hidden" src="{{root}}/images/settings-status-bar-right.png" data-visibility="statusBar.enabled &amp;&amp; statusBar.alignment =right"></img>
+                                <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"
+                                />
                             </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
+                                <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
                             </p>
                         </div>
@@ -301,7 +378,7 @@
                                 <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>
+                                    <option value="none">a custom set of</option>
                                 </select>
                                 <label for="keymap"> keyboard shortcuts</label>
                                 <span class="label__hint hidden" data-visibility="keymap =standard">
@@ -357,7 +434,7 @@
                             <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="#">Become a Patron</a></li> -->
                             <li>
                                 <a href="http://amod.io">Hire me</a>
                             </li>

src/ui/webpack.config.js

@@ -1,19 +1,23 @@
 'use strict';
 const webpack = require('webpack');
+const glob = require('glob');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = function(env, argv) {
     if (env === undefined) {
         env = {};
     }
 
-    const minify = !!env.production;
-    const prefixCss = true;
-    const sourceMaps = !env.production;
+    const production = !!env.production;
+
+    const quick = !production && !!env.quick;
+    const minify = production;
+    const sourceMaps = !production;
 
     const plugins = [
         new webpack.optimize.ModuleConcatenationPlugin(),
@@ -26,7 +30,7 @@ module.exports = function(env, argv) {
             template: 'settings/index.html',
             filename: path.resolve(__dirname, '../..', 'settings.html'),
             inject: true,
-            inlineSource: env.production ? '.(js|css)$' : undefined,
+            inlineSource: production ? '.(js|css)$' : undefined,
             // inlineSource: '.(js|css)$',
             minify: minify
                 ? {
@@ -46,7 +50,7 @@ module.exports = function(env, argv) {
             template: 'welcome/index.html',
             filename: path.resolve(__dirname, '../..', 'welcome.html'),
             inject: true,
-            inlineSource: env.production ? '.(js|css)$' : undefined,
+            inlineSource: production ? '.(js|css)$' : undefined,
             // inlineSource: '.(js|css)$',
             minify: minify
                 ? {
@@ -73,11 +77,31 @@ module.exports = function(env, argv) {
                     comments: false,
                     ecma: 5
                 },
-                sourceMap: sourceMaps,
+                sourceMap: sourceMaps
             }
         })
     ];
 
+    if (!quick) {
+        plugins.push(
+            new ImageminPlugin({
+                disable: false,
+                externalImages: {
+                    sources: glob.sync(path.resolve(__dirname, 'images/settings/*.png')),
+                    destination: path.resolve(__dirname, '../..')
+                },
+                gifsicle: null,
+                jpegtran: null,
+                optipng: null,
+                pngquant: {
+                    quality: '85-100',
+                    speed: minify ? 1 : 10
+                },
+                svgo: null
+            })
+        );
+    }
+
     return {
         // This is ugly having main.scss on both bundles, but if it is added separately it will generate a js bundle :(
         entry: {

src/ui/welcome/index.html

@@ -11,7 +11,7 @@
         <div class="content">
             <header>
                 <div class="header__logo">
-                    <img class="image__logo" src="{{root}}/images/gitlens-icon.png">
+                    <img class="image__logo" src="{{root}}/images/gitlens-icon.png" />
                     <div>
                         <h1>GitLens</h1>
                         <p class="header__subtitle">Git supercharged</p>
@@ -35,9 +35,12 @@
                 <div class="section-group__content">
                     <div class="section-group-section">
                         <p>
-                            GitLens is a free, <a title="Open GitLens on GitHub" href="https://github.com/eamodio/vscode-gitlens">open-source</a> extension for Visual Studio Code created by <a title="About Eric Amodio" href="http://amod.io">Eric Amodio</a>.
+                            GitLens is a free,
+                            <a title="Open GitLens on GitHub" href="https://github.com/eamodio/vscode-gitlens">open-source</a> extension for Visual Studio Code created by
+                            <a title="Learn more about Eric"
+                                href="http://amod.io">Eric Amodio</a>.
                         </p>
-                        <p>
+                        <p class="mb-2">
                             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!
@@ -56,7 +59,7 @@
                                     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
+                        <p class="mb-2">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>
@@ -117,7 +120,7 @@
                             <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="#">Become a Patron</a></li> -->
                             <li>
                                 <a href="http://amod.io">Hire me</a>
                             </li>