Add mode indicator

src/content.ts

@@ -61,3 +61,34 @@ if (
 ) {
     config.getAsync("newtab").then(newtab => newtab && excmds.open(newtab))
 }
+
+// Really bad status indicator
+let statusIndicator = document.createElement("span")
+statusIndicator.className = "cleanslate TridactylStatusIndicator"
+window.addEventListener("DOMContentLoaded", () => {
+    statusIndicator.textContent = state.mode || "normal"
+    document.body.appendChild(statusIndicator)
+})
+
+browser.storage.onChanged.addListener((changes, areaname) => {
+    if (areaname === "local" && "state" in changes) {
+        let mode = changes.state.newValue.mode
+        if (
+            dom.isTextEditable(document.activeElement) &&
+            !["input", "ignore"].includes(mode)
+        ) {
+            statusIndicator.textContent = "insert"
+            // this doesn't work; statusIndicator.style is full of empty string
+            // statusIndicator.style.borderColor = "green !important"
+            // need to fix loss of focus by click: doesn't do anything here.
+        } else if (
+            mode === "insert" &&
+            !dom.isTextEditable(document.activeElement)
+        ) {
+            statusIndicator.textContent = "normal"
+            // statusIndicator.style.borderColor = "lightgray !important"
+        } else {
+            statusIndicator.textContent = mode
+        }
+    }
+})

src/static/content.css

@@ -11,3 +11,17 @@
     min-height: 0 !important;
     max-height: none !important;
 }
+
+.TridactylStatusIndicator {
+    position: fixed !important;
+    bottom: 0 !important;
+    font-family: monospace !important;
+    background: white !important;
+    border: 1.5px lightgray solid !important;
+    border-radius: 2px !important;
+    font-size: 12px !important;
+    padding: 0.25ex !important;
+    right: 2px !important;
+    bottom: 2px !important;
+    z-index: 2147483646 !important; /* this is one less than the command line so that it is hidden by it */
+}