From 8514209cf9dfde5328ae71f9fcf039b077f86767 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Sat, 6 Oct 2018 18:04:07 +0200
Subject: [PATCH 01/10] Allow embedded settings to wrap

The previous code used <ul> and <li> in order to generate the list of
aliases/bindings related to an ex command. This was semantically correct
but required ugly CSS hacks in order to display them on a single line.
On top of that, this line didn't wrap when the list of bindings/commands
was longer that the page and thus required scrolling horizontally.

This commit replaces <ul> with <p> and <li> with span. It inserts a
space between each span and simplifies the css a bit, this results in
lines of bindings/aliases wrapping neatly.
---
 src/help.ts                            | 17 +++++++++--------
 src/static/typedoc/assets/css/main.css | 10 +++-------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/help.ts b/src/help.ts
index c7569204..5104eb42 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -10,11 +10,11 @@ function initTridactylSettingElem(
     let bindingNode = elem.getElementsByClassName(`Tridactyl${kind}`)[0]
     if (bindingNode) {
         Array.from(bindingNode.children)
-            .filter(e => e.tagName == "LI")
+            .filter(e => e.tagName == "SPAN")
             .forEach(e => e.parentNode.removeChild(e))
     } else {
         // Otherwise, create it
-        bindingNode = document.createElement("ul")
+        bindingNode = document.createElement("p")
         bindingNode.className = `TridactylSetting Tridactyl${kind}`
         bindingNode.textContent = kind + ": "
         elem.insertBefore(bindingNode, elem.children[2])
@@ -41,7 +41,7 @@ async function addSetting(settingName: string) {
     // We're ignoring composite because it combines multiple excmds
     delete commandElems["composite"]
 
-    // Initialize or reset the <ul> element that will contain settings in each commandElem
+    // Initialize or reset the <p> element that will contain settings in each commandElem
     let settingElems = Object.keys(commandElems).reduce(
         (settingElems, cmdName) => {
             settingElems[cmdName] = initTridactylSettingElem(
@@ -71,11 +71,12 @@ async function addSetting(settingName: string) {
 
         // If there is an HTML element for settings that correspond to the excmd we just found
         if (settingElems[excmd]) {
-            let settingLi = document.createElement("li")
-            settingLi.innerText = setting
-            settingLi.title = settings[setting]
+            let settingSpan = document.createElement("span")
+            settingSpan.innerText = setting
+            settingSpan.title = settings[setting]
             // Add the setting to the element
-            settingElems[excmd].appendChild(settingLi)
+            settingElems[excmd].appendChild(settingSpan)
+            settingElems[excmd].appendChild(document.createTextNode(" "))
         }
     }
 
@@ -83,7 +84,7 @@ async function addSetting(settingName: string) {
     Object.values(settingElems)
         .filter(
             (e: HTMLElement) =>
-                !Array.from(e.children).find(c => c.tagName == "LI"),
+                !Array.from(e.children).find(c => c.tagName == "SPAN"),
         )
         .forEach((e: HTMLElement) => e.parentNode.removeChild(e))
 }
diff --git a/src/static/typedoc/assets/css/main.css b/src/static/typedoc/assets/css/main.css
index 55dc519d..3d4b91cd 100644
--- a/src/static/typedoc/assets/css/main.css
+++ b/src/static/typedoc/assets/css/main.css
@@ -2983,18 +2983,14 @@ ul.tsd-descriptions h4 {
     border-radius: 2px;
 }
 
-ul.TridactylSetting {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    list-style: none;
+.TridactylSetting {
     padding: 0;
-    white-space: nowrap;
     font-weight: bold;
     font-size: 10pt;
 }
 
-ul.TridactylSetting li {
+.TridactylSetting span {
+    display: inline-block;
     font-family: Monospace;
     font-weight: normal;
     background: whitesmoke;

From 884b8fbe6d59be758063c369758eb8e75e4a9c93 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Sat, 6 Oct 2018 20:42:25 +0200
Subject: [PATCH 02/10] Make `:help configoption` work

This commits makes getting to the help page of a configuration option
easier.
---
 src/excmds.ts | 69 +++++++++++++++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/excmds.ts b/src/excmds.ts
index c7830986..c7ef93ea 100644
--- a/src/excmds.ts
+++ b/src/excmds.ts
@@ -1497,43 +1497,70 @@ export function home(all: "false" | "true" = "false") {
 
 /** Show this page.
 
-    `:help something` jumps to the entry for something. Something can be an excmd, an alias for an excmd or a binding.
+    `:help something` jumps to the entry for something. Something can be an excmd, an alias for an excmd, a binding or a setting.
 
-    The "nmaps" list is a list of all the bindings for the command you're seeing and the "exaliases" list lists all its aliases.
+    On the ex command page, the "nmaps" list is a list of all the bindings for the command you're seeing and the "exaliases" list lists all its aliases.
 
-    If there's a conflict (e.g. you have a "go" binding that does something and also a "go" excmd that does something else), the binding has higher priority.
+    If there's a conflict (e.g. you have a "go" binding that does something, a "go" excmd that does something else and a "go" setting that does a third thing), the binding is chosen first, then the setting, then the excmd.
 
     If the keyword you gave to `:help` is actually an alias for a composite command (see [[composite]]) , you will be taken to the help section for the first command of the pipeline. You will be able to see the whole pipeline by hovering your mouse over the alias in the "exaliases" list. Unfortunately there currently is no way to display these HTML tooltips from the keyboard.
 
     e.g. `:help bind`
 */
 //#background
-export async function help(excmd?: string) {
-    const docpage = browser.extension.getURL("static/docs/modules/_excmds_.html")
-    if (excmd === undefined) excmd = ""
+export async function help(helpItem?: string) {
+    let docpage = browser.extension.getURL("static/docs/modules/_excmds_.html")
+    if (helpItem === undefined) helpItem = ""
     else {
-        let bindings = await config.getAsync("nmaps")
-        // If 'excmd' matches a binding, replace 'excmd' with the command that would be executed when pressing the key sequence referenced by 'excmd'
-        if (excmd in bindings) {
-            excmd = bindings[excmd].split(" ")
-            excmd = ["composite", "fillcmdline"].includes(excmd[0]) ? excmd[1] : excmd[0]
+        let matched = false
+        const settings = await config.getAsync()
+
+        for (let mode of ["nmaps", "imaps", "inputmaps", "ignoremaps"]) {
+            let bindings = settings[mode]
+            // If 'helpItem' matches a binding, replace 'helpItem' with the command that would be executed when pressing the key sequence referenced by 'helpItem' and don't check other modes
+            if (helpItem in bindings) {
+                helpItem = bindings[helpItem].split(" ")
+                helpItem = ["composite", "fillcmdline"].includes(helpItem[0]) ? helpItem[1] : helpItem[0]
+                matched = true
+                break
+            }
         }
 
-        let aliases = await config.getAsync("exaliases")
-        // As long as excmd is an alias, try to resolve this alias to a real excmd
+        let aliases = settings.exaliases
+        // As long as helpItem is an alias, try to resolve this alias to a real helpItem
         let resolved = []
-        while (aliases[excmd]) {
-            resolved.push(excmd)
-            excmd = aliases[excmd].split(" ")
-            excmd = excmd[0] == "composite" ? excmd[1] : excmd[0]
+        while (aliases[helpItem]) {
+            matched = true
+            resolved.push(helpItem)
+            helpItem = aliases[helpItem].split(" ")
+            helpItem = helpItem[0] == "composite" ? helpItem[1] : helpItem[0]
             // Prevent infinite loops
-            if (resolved.includes(excmd)) break
+            if (resolved.includes(helpItem)) break
+        }
+
+        // If we still haven't found either a binding or an alias, try a setting name
+        if (!matched) {
+            let subSettings = settings
+            let settingNames = helpItem.split(".")
+            let settingHelpAnchor = ""
+            // Try to match each piece of the path, this is done so that a correct object (e.g. followpagepatterns) with an incorrect key (e.g. nextt) will still match the parent object.
+            for (let settingName of settingNames) {
+                if (settingName in subSettings) {
+                    settingHelpAnchor += settingName + "."
+                    subSettings = subSettings[settingName]
+                }
+            }
+            if (settingHelpAnchor != "") {
+                docpage = browser.extension.getURL("static/docs/classes/_lib_config_.default_config.html")
+                helpItem = settingHelpAnchor.slice(0,-1)
+            }
         }
     }
+
     if ((await activeTab()).url.startsWith(docpage)) {
-        open(docpage + "#" + excmd)
+        open(docpage + "#" + helpItem)
     } else {
-        tabopen(docpage + "#" + excmd)
+        tabopen(docpage + "#" + helpItem)
     }
 }
 
@@ -3140,7 +3167,7 @@ export function seturl(pattern: string, key: string, ...values: string[]) {
 
 /** Set a key value pair in config.
 
-    Use to set any string values found [here](/static/docs/classes/_config_.default_config.html).
+    Use to set any string values found [here](/static/docs/classes/_lib_config_.default_config.html).
 
     e.g.
         set searchurls.google https://www.google.com/search?q=

From e9aabaa8656673a0542932a4b0264396938233aa Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Sun, 7 Oct 2018 16:35:35 +0200
Subject: [PATCH 03/10] Slightly improve documentation

This commit removes unnecessary documentation, tries to make the
introduction shorter and fleshes out the documentation of a few
under-documented functions.
---
 src/excmds.ts | 102 ++++++++++++++++++++------------------------------
 1 file changed, 41 insertions(+), 61 deletions(-)

diff --git a/src/excmds.ts b/src/excmds.ts
index c7ef93ea..8f46ddc3 100644
--- a/src/excmds.ts
+++ b/src/excmds.ts
@@ -4,25 +4,11 @@
 
     Use `:help <excmd>` or scroll down to show [[help]] for a particular excmd. If you're still stuck, you might consider reading through the [:tutor](/static/clippy/tutor.html) again.
 
-    The default keybinds can be found [here](/static/docs/classes/_lib_config_.default_config.html) or all active binds can be seen with `:viewconfig nmaps`.
-    
-    You can also view them with [[bind]]. Try `bind j`.
-
-    For more information, and FAQs, check out our [readme][3] on github.
-
-    Tridactyl is in a pretty early stage of development. Please report any
-    issues and make requests for missing features on the GitHub [project page][1].
-    You can also get in touch using Matrix, Gitter, or IRC chat clients:
-
-    [![Matrix Chat][matrix-badge]][matrix-link]
-    [![Gitter Chat][gitter-badge]][gitter-link]
-    [![Freenode Chat][freenode-badge]][freenode-link]
-
-    All three channels are mirrored together, so it doesn't matter which one you use.
+    The default keybinds and settings can be found [here](/static/docs/classes/_lib_config_.default_config.html) and active binds can be seen with `:viewconfig nmaps` or with [[bind]].
 
     ## How to use this help page
 
-    We've hackily re-purposed TypeDoc which is designed for internal documentation. Every function (excmd) on this page can be called via Tridactyl's command line which we call "ex". There is a slight change in syntax, however. Wherever you see:
+    Every function (excmd) on this page can be called via Tridactyl's command line which we call "ex". There is a slight change in syntax, however. Wherever you see:
 
     `function(arg1,arg2)`
 
@@ -44,36 +30,25 @@
 
     You do not need to worry about types. Return values which are promises will turn into whatever they promise to when used in [[composite]].
 
-    ## Highlighted features:
-
-    - Press `b` to bring up a list of open tabs in the current window; you can
-      type the tab ID or part of the title or URL to choose a tab
-    - Press `Shift` + `Insert` to enter "ignore mode". Press `Shift` + `Insert`
-      again to return to "normal mode". `<C-A-backtick>` also works both ways.
-    - Press `f` to start "hint mode", `F` to open in background (note: hint
-      characters should be typed in lowercase)
-    - Press `o` to `:open` a different page
-    - Press `s` if you want to search for something that looks like a domain
-      name or URL
-    - [[bind]] new commands with e.g. `:bind J tabnext`
-    - Type `:help` to see a list of available excmds
-    - Use `yy` to copy the current page URL to your clipboard
-    - `[[`and `]]`  to navigate through the pages of comics, paginated
-      articles, etc
-    - Pressing `ZZ` will close all tabs and windows, but it will only "save"
-      them if your about:preferences are set to "show your tabs and windows
-      from last time"
-    - Press Ctrl-i in a text box to edit in an external editor (e.g. vim). Requires native messenger.
-    - Change theme with `colours default|dark|greenmat|shydactyl`
-
+    ## Caveats
     There are some caveats common to all webextension vimperator-alikes:
 
     - To make Tridactyl work on addons.mozilla.org and some other Mozilla domains, you need to open `about:config`, run [[fixamo]] or add a new boolean `privacy.resistFingerprinting.block_mozAddonManager` with the value `true`, and remove the above domains from `extensions.webextensions.restrictedDomains`.
     - Tridactyl can't run on about:\*, some file:\* URIs, view-source:\*, or data:\*, URIs.
-    - To change/hide the GUI of Firefox from Tridactyl, you can use [[guiset]]
-      with the native messenger installed (see [[native]] and
-      [[installnative]]). Alternatively, you can edit your userChrome yourself.
-      There is an [example file](2) available in our repository.
+    - To change/hide the GUI of Firefox from Tridactyl, you can use [[guiset]] with the native messenger installed (see [[native]] and [[installnative]]). Alternatively, you can edit your userChrome yourself. There is an [example file](2) available in our repository.
+    
+    ## Getting help
+
+    For more information, and FAQs, check out our [readme][3] on github.
+
+    Tridactyl is in a pretty early stage of development. Please report any issues and make requests for missing features on the GitHub [project page][1]. You can also get in touch using Matrix, Gitter, or IRC chat clients:
+
+    [![Matrix Chat][matrix-badge]][matrix-link]
+    [![Gitter Chat][gitter-badge]][gitter-link]
+    [![Freenode Chat][freenode-badge]][freenode-link]
+
+    All three channels are mirrored together, so it doesn't matter which one you use.
+
 
     [1]: https://github.com/cmcaine/tridactyl/issues
     [2]: https://github.com/cmcaine/tridactyl/blob/master/src/static/userChrome-minimal.css
@@ -218,7 +193,7 @@ export async function editor() {
 }
 
 /**
- * Behaves like readline's [delete_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [delete_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. deletes the character to the right of the caret.
  **/
 //#content
 export function im_delete_char() {
@@ -242,7 +217,7 @@ export function im_delete_char() {
 }
 
 /**
- * Behaves like readline's [delete_backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [delete_backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. deletes the character to the left of the caret.
  **/
 //#content
 export function im_delete_backward_char() {
@@ -265,7 +240,7 @@ export function im_delete_backward_char() {
 }
 
 /**
- * Behaves like readline's [tab_insert](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [tab_insert](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. inserts a tab character to the left of the cursor.
  **/
 //#content
 export function im_tab_insert() {
@@ -286,7 +261,7 @@ export function im_tab_insert() {
 }
 
 /**
- * Behaves like readline's [transpose_chars](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [transpose_chars](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. transposes the character to the left of the cursor with the character to the right of the cursor and then moves the cursor one character to the right. If there are no characters to the right or to the left of the cursor, uses the two characters the closest to the cursor.
  **/
 //#content
 export function im_transpose_chars() {
@@ -373,7 +348,7 @@ export function wordAfterPos(text: string, position: number) {
 }
 
 /**
- * Behaves like readline's [transpose_words](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [transpose_words](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Basically equivalent to [[im_transpose_chars]], but using words as defined by the wordpattern setting.
  **/
 //#content
 export function im_transpose_words() {
@@ -432,7 +407,7 @@ function applyWord(fn: (string) => string) {
 }
 
 /**
- * Behaves like readline's [upcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [upcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the cursor is in uppercase.
  **/
 //#content
 export function im_upcase_word() {
@@ -440,7 +415,7 @@ export function im_upcase_word() {
 }
 
 /**
- * Behaves like readline's [downcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [downcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the cursor is in lowercase.
  **/
 //#content
 export function im_downcase_word() {
@@ -448,7 +423,7 @@ export function im_downcase_word() {
 }
 
 /**
- * Behaves like readline's [capitalize_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14).
+ * Behaves like readline's [capitalize_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the initial character of the word the cursor is in uppercase.
  **/
 //#content
 export function im_capitalize_word() {
@@ -456,7 +431,7 @@ export function im_capitalize_word() {
 }
 
 /**
- * Behaves like readline's [kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15).
+ * Behaves like readline's [kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the right of the cursor until reaching either the end of the text or the newline character (\n).
  **/
 //#content
 export function im_kill_line() {
@@ -481,7 +456,7 @@ export function im_kill_line() {
 }
 
 /**
- * Behaves like readline's [backward_kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15).
+ * Behaves like readline's [backward_kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the left of the cursor until either the beginning of the text is found or a newline character ("\n") is reached.
  **/
 //#content
 export function im_backward_kill_line() {
@@ -508,7 +483,7 @@ export function im_backward_kill_line() {
 }
 
 /**
- * Behaves like readline's [kill_whole_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15).
+ * Behaves like readline's [kill_whole_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character between the two newlines the cursor is in. If a newline can't be found on the left of the cursor, everything is deleted until the beginning of the text is reached. If a newline can't be found on the right, everything is deleted until the end of the text is found.
  **/
 //#content
 export function im_kill_whole_line() {
@@ -531,7 +506,7 @@ export function im_kill_whole_line() {
 }
 
 /**
- * Behaves like readline's [kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15).
+ * Behaves like readline's [kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the cursor to the end of a word, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_kill_word() {
@@ -551,7 +526,7 @@ export function im_kill_word() {
 }
 
 /**
- * Behaves like readline's [backward_kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15).
+ * Behaves like readline's [backward_kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the cursor to the beginning of a word with word being defined by the wordpattern setting.
  **/
 //#content
 export function im_backward_kill_word() {
@@ -571,7 +546,7 @@ export function im_backward_kill_word() {
 }
 
 /**
- * Behaves like readline's [beginning_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [beginning_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor to the right of the first newline character found at the left of the cursor. If no newline can be found, move the cursor to the beginning of the text.
  **/
 //#content
 export function im_beginning_of_line() {
@@ -588,7 +563,7 @@ export function im_beginning_of_line() {
 }
 
 /**
- * Behaves like readline's [end_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [end_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor to the left of the first newline character found at the right of the cursor. If no newline can be found, move the cursor to the end of the text.
  **/
 //#content
 export function im_end_of_line() {
@@ -605,7 +580,7 @@ export function im_end_of_line() {
 }
 
 /**
- * Behaves like readline's [forward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [forward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one character to the right.
  **/
 //#content
 export function im_forward_char() {
@@ -621,7 +596,7 @@ export function im_forward_char() {
 }
 
 /**
- * Behaves like readline's [backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one character to the left.
  **/
 //#content
 export function im_backward_char() {
@@ -637,7 +612,7 @@ export function im_backward_char() {
 }
 
 /**
- * Behaves like readline's [forward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [forward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one word to the right, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_forward_word() {
@@ -655,7 +630,7 @@ export function im_forward_word() {
 }
 
 /**
- * Behaves like readline's [backward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12).
+ * Behaves like readline's [backward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one word to the right, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_backward_word() {
@@ -1135,6 +1110,10 @@ export function jumpnext(n = 1) {
 }
 
 /** Similar to Pentadactyl or vim's jump list.
+ *
+ * When you scroll on a page, either by using the mouse or Tridactyl's key bindings, your position in the page will be saved after jumpdelay milliseconds (`:get jumpdelay` to know how many milliseconds that is). If you scroll again, you'll be able to go back to your previous position by using `:jumpprev 1`. If you need to go forward in the jumplist, use `:jumpprev -1`.
+ *
+ * Known bug: Tridactyl will use the same jumplist for multiple visits to a same website in the same tab, see [github issue 834](https://github.com/tridactyl/tridactyl/issues/834).
  */
 //#content
 export function jumpprev(n = 1) {
@@ -1444,6 +1423,7 @@ function removeSource() {
         sourceElement = undefined
     }
 }
+
 /** Display the (HTML) source of the current page.
 
     Behaviour can be changed by the 'viewsource' setting.

From 68d337084b79a8c6fe6f400fa0c15119e5dc31b9 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Mon, 8 Oct 2018 18:47:27 +0200
Subject: [PATCH 04/10] Embed setting values in the help page

This commit adds input fields to some of the settings in the help page.
These input fields are filled with the value of the setting they
correspong to. Users can edit these values and save their modifications
by pressing <Enter>. This is an easy way to see and change settings and
hopefully enough to use as option page.

This is achieved by adding more ugly code to help.ts. Hopefully one day
we'll get rid of TypeDoc and do our own thing in React or whatever
framework we'll have choosen and things will be cleaner.
---
 src/help.ts                            | 113 +++++++++++++++++++++----
 src/lib/config.ts                      |   4 +-
 src/static/typedoc/assets/css/main.css |  10 +++
 3 files changed, 109 insertions(+), 18 deletions(-)

diff --git a/src/help.ts b/src/help.ts
index 5104eb42..26915c78 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -89,22 +89,22 @@ async function addSetting(settingName: string) {
         .forEach((e: HTMLElement) => e.parentNode.removeChild(e))
 }
 
-browser.storage.onChanged.addListener((changes, areaname) => {
-    if ("userconfig" in changes) {
-        // JSON.stringify for comparisons like it's 2012
-        ;["nmaps", "imaps", "ignoremaps", "inputmaps", "exaliases"].forEach(
-            kind => {
-                if (
-                    JSON.stringify(changes.userconfig.newValue[kind]) !=
-                    JSON.stringify(changes.userconfig.oldValue[kind])
-                )
-                    addSetting(kind)
-            },
-        )
-    }
-})
+async function onExcmdPageLoad() {
+    browser.storage.onChanged.addListener((changes, areaname) => {
+        if ("userconfig" in changes) {
+            // JSON.stringify for comparisons like it's 2012
+            ;["nmaps", "imaps", "ignoremaps", "inputmaps", "exaliases"].forEach(
+                kind => {
+                    if (
+                        JSON.stringify(changes.userconfig.newValue[kind]) !=
+                        JSON.stringify(changes.userconfig.oldValue[kind])
+                    )
+                        addSetting(kind)
+                },
+            )
+        }
+    })
 
-addEventListener("load", async () => {
     await Promise.all(
         ["nmaps", "imaps", "ignoremaps", "inputmaps", "exaliases"].map(
             addSetting,
@@ -114,4 +114,85 @@ addEventListener("load", async () => {
     if (document.location.hash) {
         document.location.hash = document.location.hash
     }
-})
+}
+
+async function onSettingsPageLoad() {
+    const inputClassName = " TridactylSettingInput "
+    const inputClassNameModified =
+        inputClassName + " TridactylSettingInputModified "
+
+    let getIdForSetting = settingName => "TridactylSettingInput_" + settingName
+
+    browser.storage.onChanged.addListener((changes, areaname) => {
+        if (!("userconfig" in changes)) return
+        Object.keys(changes.userconfig.newValue).forEach(key => {
+            let elem = document.getElementById(
+                getIdForSetting(key),
+            ) as HTMLInputElement
+            if (!elem) return
+            elem.value = changes.userconfig.newValue[key]
+            elem.className = inputClassName
+        })
+    })
+
+    let onKeyUp = async ev => {
+        let input = ev.target
+        if (ev.key == "Enter") {
+            ;(window as any).tri.messaging.message(
+                "commandline_background",
+                "recvExStr",
+                ["set " + input.name + " " + input.value],
+            )
+        } else {
+            if (input.value == (await config.getAsync(input.name.split(".")))) {
+                input.className = inputClassName
+            } else {
+                input.className = inputClassNameModified
+            }
+        }
+    }
+
+    Array.from(document.querySelectorAll("a.tsd-anchor")).forEach(
+        async (a: HTMLAnchorElement) => {
+            let signature = (a.parentNode as any).querySelector(
+                "div.tsd-signature",
+            )
+            if (!signature)
+                // console.logging is ok because we're only spamming our own console
+                return console.log("Failed to grab signature of ", a)
+
+            let settingName = a.name.split(".")
+            let value = await config.getAsync(settingName)
+            if (!value) return console.log("Failed to grab value of ", a)
+            if (!["number", "boolean", "string"].includes(typeof value))
+                return console.log(
+                    "Not embedding value of ",
+                    a,
+                    value,
+                    " because not easily represented as string",
+                )
+
+            let input = document.createElement("input")
+            input.name = a.name
+            input.value = value
+            input.id = getIdForSetting(a.name)
+            input.className = inputClassName
+            input.addEventListener("keyup", onKeyUp)
+
+            signature.appendChild(input)
+        },
+    )
+}
+
+addEventListener(
+    "load",
+    (() => {
+        switch (document.location.pathname) {
+            case "/static/docs/modules/_excmds_.html":
+                return onExcmdPageLoad
+            case "/static/docs/classes/_lib_config_.default_config.html":
+                return onSettingsPageLoad
+        }
+        return () => {}
+    })(),
+)
diff --git a/src/lib/config.ts b/src/lib/config.ts
index d1a202d2..fd9c265d 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -47,6 +47,7 @@ export type LoggingLevel = "never" | "error" | "warning" | "info" | "debug"
  *
  * You can change anything here using `set key1.key2.key3 value` or specific things any of the various helper commands such as `bind` or `command`.
  *
+ * You can also jump to the help section of a setting using `:help $settingname`. Some of the settings have a small input field containing their current value next to them. You can modify these values and save them by pressing `<Enter>` but using `:set $setting $value` is a good habit to take as it doesn't force you to leave the page you're visiting to change your settings.
  */
 class default_config {
     /**
@@ -741,8 +742,7 @@ function setDeepProperty(obj, value, target) {
 export function mergeDeep(o1, o2) {
     let r = Array.isArray(o1) ? o1.slice() : Object.create(o1)
     Object.assign(r, o1, o2)
-    if (o2 === undefined)
-        return r
+    if (o2 === undefined) return r
     Object.keys(o1)
         .filter(key => typeof o1[key] == "object" && typeof o2[key] == "object")
         .forEach(key => Object.assign(r[key], mergeDeep(o1[key], o2[key])))
diff --git a/src/static/typedoc/assets/css/main.css b/src/static/typedoc/assets/css/main.css
index 3d4b91cd..2b2f8cf6 100644
--- a/src/static/typedoc/assets/css/main.css
+++ b/src/static/typedoc/assets/css/main.css
@@ -2999,6 +2999,16 @@ ul.tsd-descriptions h4 {
     border-radius: 3px;
 }
 
+.TridactylSettingInput {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+}
+
+.TridactylSettingInputModified {
+    color: blue;
+}
+
 /* ul.TridactylSetting li:not(:last-child):after { */
 /*     content: ", "; */
 /*     font-weight: normal; */

From 8acfbafe36c1fc9d6dc4410780030b11b2431d53 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Tue, 9 Oct 2018 16:09:30 +0200
Subject: [PATCH 05/10] Add default_config help page to Tridactyl's
 about:addons entry

---
 src/manifest.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/manifest.json b/src/manifest.json
index 8e57fe00..bc575a8d 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -64,5 +64,9 @@
             "id": "tridactyl.vim@cmcaine.co.uk",
             "strict_min_version": "54.0"
         }
+    },
+    "options_ui": {
+        "page": "static/docs/classes/_lib_config_.default_config.html",
+        "open_in_tab": true
     }
-}
\ No newline at end of file
+}

From 5a837397f296cc34c040950dcce38f5976e4a7f6 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Wed, 10 Oct 2018 09:28:44 +0200
Subject: [PATCH 06/10] excmds.ts: s/cursor/caret/g

---
 src/excmds.ts | 74 +++++++++++++++++++++++++--------------------------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/excmds.ts b/src/excmds.ts
index 8f46ddc3..b9cfd19a 100644
--- a/src/excmds.ts
+++ b/src/excmds.ts
@@ -199,7 +199,7 @@ export async function editor() {
 export function im_delete_char() {
     let elem = DOM.getLastUsedInput() as HTMLInputElement
     let pos = elem.selectionStart
-    // Abort if we can't find out where the cursor is
+    // Abort if we can't find out where the caret is
     if (pos === undefined || pos === null) {
         logger.warning("im_delete_char: elem doesn't have a selectionStart")
         return
@@ -223,9 +223,9 @@ export function im_delete_char() {
 export function im_delete_backward_char() {
     let elem = DOM.getLastUsedInput() as HTMLInputElement
     let pos = elem.selectionStart
-    // Abort if we can't find out where the cursor is or if it is at the beginning of the text
+    // Abort if we can't find out where the caret is or if it is at the beginning of the text
     if (!pos) {
-        logger.warning("im_delete_backward_char: elem doesn't have a selectionStart or cursor is at beginning of line.")
+        logger.warning("im_delete_backward_char: elem doesn't have a selectionStart or caret is at beginning of line.")
         return
     }
     let text = getInput(elem)
@@ -240,7 +240,7 @@ export function im_delete_backward_char() {
 }
 
 /**
- * Behaves like readline's [tab_insert](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. inserts a tab character to the left of the cursor.
+ * Behaves like readline's [tab_insert](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. inserts a tab character to the left of the caret.
  **/
 //#content
 export function im_tab_insert() {
@@ -261,7 +261,7 @@ export function im_tab_insert() {
 }
 
 /**
- * Behaves like readline's [transpose_chars](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. transposes the character to the left of the cursor with the character to the right of the cursor and then moves the cursor one character to the right. If there are no characters to the right or to the left of the cursor, uses the two characters the closest to the cursor.
+ * Behaves like readline's [transpose_chars](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14), i.e. transposes the character to the left of the caret with the character to the right of the caret and then moves the caret one character to the right. If there are no characters to the right or to the left of the caret, uses the two characters the closest to the caret.
  **/
 //#content
 export function im_transpose_chars() {
@@ -282,7 +282,7 @@ export function im_transpose_chars() {
 }
 
 /** @hidden
- * Detects the boundaries of a word in text according to the wordpattern setting. If POSITION is in a word, the boundaries of this word are returned. If POSITION is out of a word and BEFORE is true, the word before POSITION is returned. If BEFORE is false, the word after the cursor is returned.
+ * Detects the boundaries of a word in text according to the wordpattern setting. If POSITION is in a word, the boundaries of this word are returned. If POSITION is out of a word and BEFORE is true, the word before POSITION is returned. If BEFORE is false, the word after the caret is returned.
  */
 //#content_helper
 export function getWordBoundaries(text: string, position: number, before: boolean): [number, number] {
@@ -290,7 +290,7 @@ export function getWordBoundaries(text: string, position: number, before: boolea
     let pattern = new RegExp(config.get("wordpattern"), "g")
     let boundary1 = position < text.length ? position : text.length - 1
     let direction = before ? -1 : 1
-    // if the cursor is not in a word, try to find the word before or after it
+    // if the caret is not in a word, try to find the word before or after it
     while (boundary1 >= 0 && boundary1 < text.length && !text[boundary1].match(pattern)) {
         boundary1 += direction
     }
@@ -311,7 +311,7 @@ export function getWordBoundaries(text: string, position: number, before: boolea
         throw new Error(`getWordBoundaries: no characters matching wordpattern (${pattern.source}) in text (${text})`)
     }
 
-    // now that we know the cursor is in a word (it could be in the middle depending on POSITION!), try to find its beginning/end
+    // now that we know the caret is in a word (it could be in the middle depending on POSITION!), try to find its beginning/end
     while (boundary1 >= 0 && boundary1 < text.length && !!text[boundary1].match(pattern)) {
         boundary1 += direction
     }
@@ -319,7 +319,7 @@ export function getWordBoundaries(text: string, position: number, before: boolea
     boundary1 -= direction
 
     let boundary2 = boundary1
-    // now that we know the cursor is at the beginning/end of a word, we need to find the other boundary
+    // now that we know the caret is at the beginning/end of a word, we need to find the other boundary
     while (boundary2 >= 0 && boundary2 < text.length && !!text[boundary2].match(pattern)) {
         boundary2 -= direction
     }
@@ -360,14 +360,14 @@ export function im_transpose_words() {
     }
     let text = getInput(elem)
     if (text.length == 0) return
-    // If the cursor is at the end of the text, move it just before the last character
+    // If the caret is at the end of the text, move it just before the last character
     if (pos >= text.length) {
         pos = text.length - 1
     }
-    // Find the word the cursor is in
+    // Find the word the caret is in
     let firstBoundaries = getWordBoundaries(text, pos, false)
     let secondBoundaries = firstBoundaries
-    // If there is a word after the word the cursor is in, use it for the transposition, otherwise use the word before it
+    // If there is a word after the word the caret is in, use it for the transposition, otherwise use the word before it
     let nextWord = wordAfterPos(text, firstBoundaries[1])
     if (nextWord > -1) {
         secondBoundaries = getWordBoundaries(text, nextWord, false)
@@ -379,12 +379,12 @@ export function im_transpose_words() {
     let beginning = text.substring(0, firstBoundaries[0]) + secondWord + text.substring(firstBoundaries[1], secondBoundaries[0])
     pos = beginning.length
     fillinput(DOM.getSelector(elem), beginning + firstWord + text.substring(secondBoundaries[1]))
-    // Move cursor just before the word that was transposed
+    // Move caret just before the word that was transposed
     elem.selectionStart = elem.selectionEnd = pos
 }
 
 /** @hidden
- * Applies a function to the word the cursor is in, or to the next word if the cursor is not in a word, or to the previous word if the current word is empty.
+ * Applies a function to the word the caret is in, or to the next word if the caret is not in a word, or to the previous word if the current word is empty.
  */
 //#content_helper
 function applyWord(fn: (string) => string) {
@@ -396,7 +396,7 @@ function applyWord(fn: (string) => string) {
     }
     let text = getInput(elem)
     if (text.length == 0) return
-    // If the cursor is at the end of the text, move it just before the last character
+    // If the caret is at the end of the text, move it just before the last character
     if (pos >= text.length) {
         pos = text.length - 1
     }
@@ -407,7 +407,7 @@ function applyWord(fn: (string) => string) {
 }
 
 /**
- * Behaves like readline's [upcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the cursor is in uppercase.
+ * Behaves like readline's [upcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the caret is in uppercase.
  **/
 //#content
 export function im_upcase_word() {
@@ -415,7 +415,7 @@ export function im_upcase_word() {
 }
 
 /**
- * Behaves like readline's [downcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the cursor is in lowercase.
+ * Behaves like readline's [downcase_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the word the caret is in lowercase.
  **/
 //#content
 export function im_downcase_word() {
@@ -423,7 +423,7 @@ export function im_downcase_word() {
 }
 
 /**
- * Behaves like readline's [capitalize_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the initial character of the word the cursor is in uppercase.
+ * Behaves like readline's [capitalize_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC14). Makes the initial character of the word the caret is in uppercase.
  **/
 //#content
 export function im_capitalize_word() {
@@ -431,7 +431,7 @@ export function im_capitalize_word() {
 }
 
 /**
- * Behaves like readline's [kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the right of the cursor until reaching either the end of the text or the newline character (\n).
+ * Behaves like readline's [kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the right of the caret until reaching either the end of the text or the newline character (\n).
  **/
 //#content
 export function im_kill_line() {
@@ -445,7 +445,7 @@ export function im_kill_line() {
     if (text.length == 0) return
     let newLine = text.substring(pos).search("\n")
     if (newLine != -1) {
-        // If the cursor is right before the newline, kill the newline
+        // If the caret is right before the newline, kill the newline
         if (newLine == 0) newLine = 1
         text = text.substring(0, pos) + text.substring(pos + newLine)
     } else {
@@ -456,7 +456,7 @@ export function im_kill_line() {
 }
 
 /**
- * Behaves like readline's [backward_kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the left of the cursor until either the beginning of the text is found or a newline character ("\n") is reached.
+ * Behaves like readline's [backward_kill_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15), i.e. deletes every character to the left of the caret until either the beginning of the text is found or a newline character ("\n") is reached.
  **/
 //#content
 export function im_backward_kill_line() {
@@ -468,7 +468,7 @@ export function im_backward_kill_line() {
     }
     let text = getInput(elem)
     if (text.length == 0) return
-    // If the cursor is at the beginning of a line, join the lines
+    // If the caret is at the beginning of a line, join the lines
     if (text[pos - 1] == "\n") {
         fillinput(DOM.getSelector(elem), text.substring(0, pos - 1) + text.substring(pos))
         elem.selectionStart = elem.selectionEnd = pos - 1
@@ -476,14 +476,14 @@ export function im_backward_kill_line() {
         let newLine
         // Find the closest newline
         for (newLine = pos; newLine > 0 && text[newLine - 1] != "\n"; --newLine) {}
-        // Remove everything between the newline and the cursor
+        // Remove everything between the newline and the caret
         fillinput(DOM.getSelector(elem), text.substring(0, newLine) + text.substring(pos))
         elem.selectionStart = elem.selectionEnd = newLine
     }
 }
 
 /**
- * Behaves like readline's [kill_whole_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character between the two newlines the cursor is in. If a newline can't be found on the left of the cursor, everything is deleted until the beginning of the text is reached. If a newline can't be found on the right, everything is deleted until the end of the text is found.
+ * Behaves like readline's [kill_whole_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character between the two newlines the caret is in. If a newline can't be found on the left of the caret, everything is deleted until the beginning of the text is reached. If a newline can't be found on the right, everything is deleted until the end of the text is found.
  **/
 //#content
 export function im_kill_whole_line() {
@@ -496,17 +496,17 @@ export function im_kill_whole_line() {
     let text = getInput(elem)
     if (text.length == 0) return
     let firstNewLine, secondNewLine
-    // Find the newline before the cursor
+    // Find the newline before the caret
     for (firstNewLine = pos; firstNewLine > 0 && text[firstNewLine - 1] != "\n"; --firstNewLine) {}
-    // Find the newline after the cursor
+    // Find the newline after the caret
     for (secondNewLine = pos; secondNewLine < text.length && text[secondNewLine - 1] != "\n"; ++secondNewLine) {}
-    // Remove everything between the newline and the cursor
+    // Remove everything between the newline and the caret
     fillinput(DOM.getSelector(elem), text.substring(0, firstNewLine) + text.substring(secondNewLine))
     elem.selectionStart = elem.selectionEnd = firstNewLine
 }
 
 /**
- * Behaves like readline's [kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the cursor to the end of a word, with words being defined by the wordpattern setting.
+ * Behaves like readline's [kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the caret to the end of a word, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_kill_word() {
@@ -520,13 +520,13 @@ export function im_kill_word() {
     if (text.length == 0) return
     let boundaries = getWordBoundaries(text, pos, false)
     if (pos > boundaries[0] && pos < boundaries[1]) boundaries[0] = pos
-    // Remove everything between the newline and the cursor
+    // Remove everything between the newline and the caret
     fillinput(DOM.getSelector(elem), text.substring(0, boundaries[0]) + text.substring(boundaries[1] + 1))
     elem.selectionStart = elem.selectionEnd = boundaries[0]
 }
 
 /**
- * Behaves like readline's [backward_kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the cursor to the beginning of a word with word being defined by the wordpattern setting.
+ * Behaves like readline's [backward_kill_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC15). Deletes every character from the caret to the beginning of a word with word being defined by the wordpattern setting.
  **/
 //#content
 export function im_backward_kill_word() {
@@ -540,13 +540,13 @@ export function im_backward_kill_word() {
     if (text.length == 0) return
     let boundaries = getWordBoundaries(text, pos, true)
     if (pos > boundaries[0] && pos < boundaries[1]) boundaries[1] = pos
-    // Remove everything between the newline and the cursor
+    // Remove everything between the newline and the caret
     fillinput(DOM.getSelector(elem), text.substring(0, boundaries[0]) + text.substring(boundaries[1]))
     elem.selectionStart = elem.selectionEnd = boundaries[0]
 }
 
 /**
- * Behaves like readline's [beginning_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor to the right of the first newline character found at the left of the cursor. If no newline can be found, move the cursor to the beginning of the text.
+ * Behaves like readline's [beginning_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret to the right of the first newline character found at the left of the caret. If no newline can be found, move the caret to the beginning of the text.
  **/
 //#content
 export function im_beginning_of_line() {
@@ -563,7 +563,7 @@ export function im_beginning_of_line() {
 }
 
 /**
- * Behaves like readline's [end_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor to the left of the first newline character found at the right of the cursor. If no newline can be found, move the cursor to the end of the text.
+ * Behaves like readline's [end_of_line](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret to the left of the first newline character found at the right of the caret. If no newline can be found, move the caret to the end of the text.
  **/
 //#content
 export function im_end_of_line() {
@@ -580,7 +580,7 @@ export function im_end_of_line() {
 }
 
 /**
- * Behaves like readline's [forward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one character to the right.
+ * Behaves like readline's [forward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret one character to the right.
  **/
 //#content
 export function im_forward_char() {
@@ -596,7 +596,7 @@ export function im_forward_char() {
 }
 
 /**
- * Behaves like readline's [backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one character to the left.
+ * Behaves like readline's [backward_char](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret one character to the left.
  **/
 //#content
 export function im_backward_char() {
@@ -612,7 +612,7 @@ export function im_backward_char() {
 }
 
 /**
- * Behaves like readline's [forward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one word to the right, with words being defined by the wordpattern setting.
+ * Behaves like readline's [forward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret one word to the right, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_forward_word() {
@@ -630,7 +630,7 @@ export function im_forward_word() {
 }
 
 /**
- * Behaves like readline's [backward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the cursor one word to the right, with words being defined by the wordpattern setting.
+ * Behaves like readline's [backward_word](http://web.mit.edu/gnu/doc/html/rlman_1.html#SEC12). Moves the caret one word to the right, with words being defined by the wordpattern setting.
  **/
 //#content
 export function im_backward_word() {

From d8c59a5a21a009e74a66039b138f47f442509e65 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Wed, 10 Oct 2018 10:26:28 +0200
Subject: [PATCH 07/10] Update default_config help page layout

The previous layout behaved badly on small screens.
---
 src/help.ts                            | 13 ++++++-------
 src/lib/config.ts                      |  2 +-
 src/static/typedoc/assets/css/main.css |  4 +---
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/help.ts b/src/help.ts
index 26915c78..66e3566e 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -154,12 +154,7 @@ async function onSettingsPageLoad() {
 
     Array.from(document.querySelectorAll("a.tsd-anchor")).forEach(
         async (a: HTMLAnchorElement) => {
-            let signature = (a.parentNode as any).querySelector(
-                "div.tsd-signature",
-            )
-            if (!signature)
-                // console.logging is ok because we're only spamming our own console
-                return console.log("Failed to grab signature of ", a)
+            let section = a.parentNode
 
             let settingName = a.name.split(".")
             let value = await config.getAsync(settingName)
@@ -179,7 +174,11 @@ async function onSettingsPageLoad() {
             input.className = inputClassName
             input.addEventListener("keyup", onKeyUp)
 
-            signature.appendChild(input)
+            let div = document.createElement("div")
+            div.appendChild(document.createTextNode("Current value:"))
+            div.appendChild(input)
+
+            section.appendChild(div)
         },
     )
 }
diff --git a/src/lib/config.ts b/src/lib/config.ts
index fd9c265d..3bb23875 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -47,7 +47,7 @@ export type LoggingLevel = "never" | "error" | "warning" | "info" | "debug"
  *
  * You can change anything here using `set key1.key2.key3 value` or specific things any of the various helper commands such as `bind` or `command`.
  *
- * You can also jump to the help section of a setting using `:help $settingname`. Some of the settings have a small input field containing their current value next to them. You can modify these values and save them by pressing `<Enter>` but using `:set $setting $value` is a good habit to take as it doesn't force you to leave the page you're visiting to change your settings.
+ * You can also jump to the help section of a setting using `:help $settingname`. Some of the settings have an input field containing their current. You can modify these values and save them by pressing `<Enter>` but using `:set $setting $value` is a good habit to take as it doesn't force you to leave the page you're visiting to change your settings.
  */
 class default_config {
     /**
diff --git a/src/static/typedoc/assets/css/main.css b/src/static/typedoc/assets/css/main.css
index 2b2f8cf6..3fb0fc6a 100644
--- a/src/static/typedoc/assets/css/main.css
+++ b/src/static/typedoc/assets/css/main.css
@@ -3000,9 +3000,7 @@ ul.tsd-descriptions h4 {
 }
 
 .TridactylSettingInput {
-    position: absolute;
-    top: 0px;
-    right: 0px;
+    margin-left: 6pt;
 }
 
 .TridactylSettingInputModified {

From 1c63478b5cb5d308d80b148cbdb800da0ac984d0 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Wed, 10 Oct 2018 11:31:27 +0200
Subject: [PATCH 08/10] Add HelpCompletionSource

The help completion source provides completions for settings, excmds,
aliases and bindings, sorted in lexicographical order. It's basically a
huge copy-paste of the Settings and Excmd completion sources but should
be enough until we have a way to provide multiple completion sources for
a single excmd.
---
 src/commandline_frame.ts       |   4 +-
 src/completions/Help.ts        | 101 +++++++++++++++++++++++++++++++++
 src/static/css/commandline.css |   4 ++
 3 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 src/completions/Help.ts

diff --git a/src/commandline_frame.ts b/src/commandline_frame.ts
index 5ef2227a..fcce5d77 100644
--- a/src/commandline_frame.ts
+++ b/src/commandline_frame.ts
@@ -8,6 +8,7 @@ import { BufferAllCompletionSource } from "@src/completions/BufferAll"
 import { BufferCompletionSource } from "@src/completions/Buffer"
 import { BmarkCompletionSource } from "@src/completions/Bmark"
 import { ExcmdCompletionSource } from "@src/completions/Excmd"
+import { HelpCompletionSource } from "@src/completions/Help"
 import { HistoryCompletionSource } from "@src/completions/History"
 import { SettingsCompletionSource } from "@src/completions/Settings"
 import * as Messaging from "@src/lib/messaging"
@@ -65,8 +66,9 @@ function enableCompletions() {
             new BufferAllCompletionSource(completionsDiv),
             new BufferCompletionSource(completionsDiv),
             new ExcmdCompletionSource(completionsDiv),
-            new SettingsCompletionSource(completionsDiv),
+            new HelpCompletionSource(completionsDiv),
             new HistoryCompletionSource(completionsDiv),
+            new SettingsCompletionSource(completionsDiv),
         ]
 
         const fragment = document.createDocumentFragment()
diff --git a/src/completions/Help.ts b/src/completions/Help.ts
new file mode 100644
index 00000000..bbe5a401
--- /dev/null
+++ b/src/completions/Help.ts
@@ -0,0 +1,101 @@
+import * as Completions from "@src/completions"
+import * as Metadata from "@src/.metadata.generated"
+import * as aliases from "@src/lib/aliases"
+import * as config from "@src/lib/config"
+import state from "@src/state"
+import { browserBg } from "@src/lib/webext"
+import { typeToString } from "@src/lib/metadata"
+
+class HelpCompletionOption extends Completions.CompletionOptionHTML implements Completions.CompletionOptionFuse {
+    public fuseKeys = []
+
+    constructor(
+        public value: string,
+        doc: string
+    ) {
+        super()
+        this.html = html`<tr class="HelpCompletionOption option">
+            <td class="name">${value}</td>
+            <td class="doc">${doc}</td>
+        </tr>`
+    }
+}
+
+export class HelpCompletionSource extends Completions.CompletionSourceFuse {
+    public options: HelpCompletionOption[]
+
+    constructor(private _parent) {
+        super(
+            ["help"],
+            "HelpCompletionSource",
+            "Help",
+        )
+
+        this._parent.appendChild(this.node)
+    }
+
+    public async filter(exstr: string) {
+        this.lastExstr = exstr
+        let [prefix, query] = this.splitOnPrefix(exstr)
+        let options = ""
+
+        // Hide self and stop if prefixes don't match
+        if (prefix) {
+            // Show self if prefix and currently hidden
+            if (this.state === "hidden") {
+                this.state = "normal"
+            }
+        } else {
+            this.state = "hidden"
+            return
+        }
+
+
+        let configmd = Metadata.everything["src/lib/config.ts"].classes.default_config
+        let fns = Metadata.everything["src/excmds.ts"].functions
+        let settings = config.get()
+        let exaliases = settings.exaliases
+        let bindings = settings.nmaps
+
+        // Settings completion
+        this.options = Object.keys(settings)
+            .filter(x => x.startsWith(query))
+            .map(setting => {
+                let doc = ""
+                if (configmd[setting]) {
+                    doc = configmd[setting].doc.join(" ")
+                }
+                return new HelpCompletionOption(setting, `Setting. ${doc}`)
+            })
+        // Excmd completion
+            .concat(Object.keys(fns)
+                .filter(fn => fn.startsWith(query))
+                .map(f => new HelpCompletionOption(f, `Excmd. ${fns[f].doc}`))
+            )
+        // Alias completion
+            .concat(Object.keys(exaliases)
+                .filter(alias => alias.startsWith(query))
+                .map(alias => {
+                    let cmd = aliases.expandExstr(alias)
+                    let doc = (fns[cmd] || {}).doc || ""
+                    return new HelpCompletionOption(alias, `Alias for \`${cmd}\`. ${doc}`)
+                })
+            )
+        // Bindings completion
+            .concat(Object.keys(bindings)
+                .filter(binding => binding.startsWith(query))
+                .map(binding => new HelpCompletionOption(binding, `Normal mode binding for \`${bindings[binding]}\``)))
+            .sort((compopt1, compopt2) => compopt1.value.localeCompare(compopt2.value))
+        this.updateChain()
+    }
+
+    updateChain() {
+        // Options are pre-trimmed to the right length.
+        this.options.forEach(option => (option.state = "normal"))
+
+        // Call concrete class
+        this.updateDisplay()
+    }
+
+    onInput() {}
+}
diff --git a/src/static/css/commandline.css b/src/static/css/commandline.css
index 4caedf92..daabc07d 100644
--- a/src/static/css/commandline.css
+++ b/src/static/css/commandline.css
@@ -241,3 +241,7 @@ a.url:hover {
     width: 15%;
     text-overflow: ellipsis;
 }
+
+.HelpCompletionOption td.name {
+    max-width: 25%;
+}

From 848eb89fe89ca5d8ed85989f1483b86333aa7b36 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Wed, 10 Oct 2018 15:43:32 +0200
Subject: [PATCH 09/10] help.ts: Jump back to hash after elements have been
 added to page

---
 src/help.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/help.ts b/src/help.ts
index 66e3566e..576f5a8f 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -152,7 +152,7 @@ async function onSettingsPageLoad() {
         }
     }
 
-    Array.from(document.querySelectorAll("a.tsd-anchor")).forEach(
+    Promise.all(Array.from(document.querySelectorAll("a.tsd-anchor")).map(
         async (a: HTMLAnchorElement) => {
             let section = a.parentNode
 
@@ -180,7 +180,8 @@ async function onSettingsPageLoad() {
 
             section.appendChild(div)
         },
-    )
+        // Adding elements expands sections so if the user wants to see a specific hash, we need to focus it again
+    )).then(_ => { if (document.location.hash) { document.location.hash = document.location.hash } })
 }
 
 addEventListener(

From 6c20f02d935f24e8e5999696076e3a285b2a8307 Mon Sep 17 00:00:00 2001
From: glacambre <code@lacamb.re>
Date: Wed, 10 Oct 2018 18:30:50 +0200
Subject: [PATCH 10/10] config.ts: Merge documentation lines

---
 src/lib/config.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/config.ts b/src/lib/config.ts
index 3bb23875..067866f2 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -45,9 +45,7 @@ export type LoggingLevel = "never" | "error" | "warning" | "info" | "debug"
 /**
  * This is the default configuration that Tridactyl comes with.
  *
- * You can change anything here using `set key1.key2.key3 value` or specific things any of the various helper commands such as `bind` or `command`.
- *
- * You can also jump to the help section of a setting using `:help $settingname`. Some of the settings have an input field containing their current. You can modify these values and save them by pressing `<Enter>` but using `:set $setting $value` is a good habit to take as it doesn't force you to leave the page you're visiting to change your settings.
+ * You can change anything here using `set key1.key2.key3 value` or specific things any of the various helper commands such as `bind` or `command`. You can also jump to the help section of a setting using `:help $settingname`. Some of the settings have an input field containing their current value. You can modify these values and save them by pressing `<Enter>` but using `:set $setting $value` is a good habit to take as it doesn't force you to leave the page you're visiting to change your settings.
  */
 class default_config {
     /**