move hint component

src/content/components/follow.js

@@ -1,6 +1,6 @@
 import * as followActions from 'content/actions/follow';
 import messages from 'shared/messages';
-import Hint from 'content/hint';
+import Hint from './hint';
 import HintKeyProducer from 'content/hint-key-producer';
 
 const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';

src/content/components/hint.css

@@ -0,0 +1,10 @@
+.vimvixen-hint {
+  background-color: yellow;
+  border: 1px solid gold;
+  font-weight: bold;
+  position: absolute;
+  text-transform: uppercase;
+  z-index: 100000;
+  font-size: 12px;
+  color: black;
+}

src/content/components/hint.js

@@ -0,0 +1,36 @@
+import './hint.css';
+
+export default class Hint {
+  constructor(target, tag) {
+    if (!(document.body instanceof HTMLElement)) {
+      throw new TypeError('target is not an HTMLElement');
+    }
+
+    this.target = target;
+
+    let doc = target.ownerDocument;
+    let { top, left } = target.getBoundingClientRect();
+    let { scrollX, scrollY } = window;
+
+    this.element = doc.createElement('span');
+    this.element.className = 'vimvixen-hint';
+    this.element.textContent = tag;
+    this.element.style.left = left + scrollX + 'px';
+    this.element.style.top = top + scrollY + 'px';
+
+    this.show();
+    doc.body.append(this.element);
+  }
+
+  show() {
+    this.element.style.display = 'inline';
+  }
+
+  hide() {
+    this.element.style.display = 'none';
+  }
+
+  remove() {
+    this.element.remove();
+  }
+}