diff --git a/src/content/Application.ts b/src/content/Application.ts index 996bbbc8..1b9e2e1f 100644 --- a/src/content/Application.ts +++ b/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)); diff --git a/src/content/InputIndicator.ts b/src/content/InputIndicator.ts new file mode 100644 index 00000000..ecd740ed --- /dev/null +++ b/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"); + } + } +} diff --git a/src/content/site-style.ts b/src/content/site-style.ts index 0c335fc8..4d31b2af 100644 --- a/src/content/site-style.ts +++ b/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; +} `;