content.{ts,css}: Make modeindicator disappear on hover

This fixes https://github.com/cmcaine/tridactyl/issues/565
I chose to append a TridactylInvisible class instead of setting the
modeindicator setting to false or manually removing the element from the
DOM because this seemed more robust (e.g. when "modeindicator" is set to
true, you expect it to stay set to true and for the element to exist
within the DOM).

src/content.ts

@@ -100,6 +100,25 @@ config.getAsync("modeindicator").then(mode => {
         : ""
     statusIndicator.className =
         "cleanslate TridactylStatusIndicator " + privateMode
+    // This listener makes the modeindicator disappear when the mouse goes over it
+    statusIndicator.addEventListener("mouseenter", ev => {
+        let target = ev.target as any
+        let rect = target.getBoundingClientRect()
+        target.classList.add("TridactylInvisible")
+        let onMouseOut = ev => {
+            // If the mouse event happened out of the mode indicator boundaries
+            if (
+                ev.clientX < rect.x ||
+                ev.clientX > rect.x + rect.with ||
+                ev.clientY < rect.y ||
+                ev.clientY > rect.y + rect.height
+            ) {
+                target.classList.remove("TridactylInvisible")
+                window.removeEventListener("mousemouve", onMouseOut)
+            }
+        }
+        window.addEventListener("mousemove", onMouseOut)
+    })
     try {
         // On quick loading pages, the document is already loaded
         statusIndicator.textContent = state.mode || "normal"

src/static/css/content.css

@@ -37,6 +37,11 @@
     background: #f9f5ff !important;
 }
 
+.TridactylInvisible {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
 @media print {
     .TridactylStatusIndicator {
         display: none !important;