Add alias information to the :help page.

src/help.ts

@@ -0,0 +1,80 @@
+// This file is only loaded in tridacyl's help pages
+
+import * as config from "./config"
+
+/** Creates the element that should contain alias information */
+function initTridactylAliases(elem: HTMLElement) {
+    let aliasNode = elem.getElementsByClassName("TridactylAliases")[0]
+    // If the node already exists
+    if (aliasNode) {
+        // Empty it
+        Array.from(aliasNode.children)
+            .filter(e => e.tagName == "LI")
+            .forEach(e => e.parentNode.removeChild(e))
+    } else {
+        // Otherwise, create it
+        aliasNode = document.createElement("ul")
+        aliasNode.className = "TridactylAliases"
+        aliasNode.textContent = "Aliases: "
+        elem.insertBefore(aliasNode, elem.children[2])
+    }
+    return aliasNode
+}
+
+/** Returns an object that maps excmd names to excmd documentation element */
+function getCommandElements() {
+    return Array.from(
+        document.querySelectorAll("section.tsd-panel-group:nth-child(3) h3"),
+    ).reduce((all, elem) => {
+        all[elem.textContent] = elem.parentElement
+        return all
+    }, {})
+}
+
+/** Updates the doc with aliases fetched from the config */
+async function setCommandAliases() {
+    let commandElems = getCommandElements()
+    // We're ignoring composite because it combines multiple excmds
+    delete commandElems["composite"]
+
+    // Initialize or reset the <ul> element that will contain aliases in each commandElem
+    let aliasElems = Object.keys(commandElems).reduce((aliasElems, cmdName) => {
+        aliasElems[cmdName] = initTridactylAliases(commandElems[cmdName])
+        return aliasElems
+    }, {})
+
+    let aliases = await config.getAsync("exaliases")
+    // For each alias
+    for (let alias in aliases) {
+        let excmd = aliases[alias].split(" ")[0]
+        // Find the corresponding alias
+        // We do this in a loop because aliases can be aliases for other aliases
+        while (aliases[excmd]) excmd = aliases[excmd].split(" ")[0]
+
+        // If there is an HTML element for aliases that correspond to the excmd we just found
+        if (aliasElems[excmd]) {
+            let aliasLi = document.createElement("li")
+            aliasLi.innerText = alias
+            aliasLi.title = aliases[alias]
+            // Add the alias to the element
+            aliasElems[excmd].appendChild(aliasLi)
+        }
+    }
+}
+
+browser.storage.onChanged.addListener((changes, areaname) => {
+    if ("userconfig" in changes) {
+        // JSON.stringify for comparisons like it's 2012
+        if (
+            JSON.stringify(changes.userconfig.newValue.exaliases) !=
+            JSON.stringify(changes.userconfig.oldValue.exaliases)
+        )
+            setCommandAliases()
+    }
+})
+
+addEventListener("load", () => {
+    setCommandAliases()
+    // setCommandAliases() can change the height of nodes in the page so we need to scroll to the right place again
+    document.location.href = document.location.href
+})

src/static/typedoc/assets/css/main.css

@@ -2983,6 +2983,19 @@ ul.tsd-descriptions h4 {
     border-radius: 2px;
 }
 
+ul.TridactylAliases {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    list-style: none;
+    padding: 0;
+    white-space: nowrap;
+}
+
+ul.TridactylAliases li:not(:last-child):after {
+    content: ", ";
+}
+
 /* Other changes:
  * - removed all background images in CSS above
  * - reset all links to default FF colour

src/static/typedoc/layouts/default.hbs

@@ -7,6 +7,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="/content.js"></script>
+    <script src="/help.js"></script>
     <link rel="stylesheet" href="/static/css/content.css">
     <link rel="stylesheet" href="/static/css/hint.css">
     <link rel="stylesheet" href="/static/typedoc/assets/css/main.css">

webpack.config.js

@@ -7,6 +7,7 @@ module.exports = {
         background: "./src/background.ts",
         content: "./src/content.ts",
         commandline_frame: "./src/commandline_frame.ts",
+        help: "./src/help.ts",
     },
     output: {
         filename: "[name].js",