Added visual indicator to the entire window, when active, vim-vixen should interpret keystrokes (as opposed to when a textbox has focus and recieves keyboard input) #744

src/content/Application.ts

@@ -5,6 +5,7 @@ import MarkController from "./controllers/MarkController";
 import FollowMasterController from "./controllers/FollowMasterController";
 import FollowSlaveController from "./controllers/FollowSlaveController";
 import FollowKeyController from "./controllers/FollowKeyController";
+import InputIndicator from "./InputIndicator";
 import InputDriver from "./InputDriver";
 import KeymapController from "./controllers/KeymapController";
 import AddonEnabledUseCase from "./usecases/AddonEnabledUseCase";
@@ -110,6 +111,7 @@ export default class Application {
       }
     });
 
+    new InputIndicator();
     const inputDriver = new InputDriver(window.document.body);
     inputDriver.onKey((key) => this.followKeyController.press(key));
     inputDriver.onKey((key) => this.markKeyController.press(key));

src/content/InputIndicator.ts

@@ -0,0 +1,17 @@
+export default class InputIndicator {
+
+  constructor() {
+    document.addEventListener("DOMContentLoaded", this.onDetectFocus, true)
+    window.addEventListener("focus", this.onDetectFocus, true);
+    window.addEventListener("blur", this.onDetectFocus, true);
+    this.onDetectFocus();
+  }
+
+  private onDetectFocus() {
+    if (document!.activeElement!.tagName === "BODY"){
+        document.getElementById("vimvixen-console-frame")!.classList.add("vimvixen-indicate-border-active");
+    } else {
+        document.getElementById("vimvixen-console-frame")!.classList.remove("vimvixen-indicate-border-active");
+    }
+  }
+}

src/content/site-style.ts

@@ -23,4 +23,14 @@ export default `
   font-size: 12px;
   color: black;
 }
+
+.vimvixen-indicate-border-active {
+    box-sizing: border-box;
+   border: 8px solid #fa6600 !important;
+}
+
+.vimvixen-indicate-border {
+    border: 7px solid #ffffff00;
+    border-bottom: 8px solid #ffffff00;
+}
 `;