Hints as a classes

src/content/client/TabsClient.ts

@@ -1,18 +1,22 @@
 import * as messages from '../../shared/messages';
 
 export default interface TabsClient {
-  openUrl(url: string, newTab: boolean): Promise<void>;
+  openUrl(url: string, newTab: boolean, background?: boolean): Promise<void>;
 
   // eslint-disable-next-line semi
 }
 
-export class TabsClientImpl {
+export class TabsClientImpl implements TabsClient {
-  async openUrl(url: string, newTab: boolean): Promise<void> {
+  async openUrl(
+    url: string,
+    newTab: boolean,
+    background?: boolean,
+  ): Promise<void> {
     await browser.runtime.sendMessage({
       type: messages.OPEN_URL,
       url,
       newTab,
+      background,
     });
   }
 }
-

src/content/components/common/follow.ts

@@ -1,8 +1,11 @@
 import MessageListener from '../../MessageListener';
-import Hint from './hint';
+import Hint, { LinkHint, InputHint } from '../../presenters/Hint';
 import * as dom from '../../../shared/utils/dom';
 import * as messages from '../../../shared/messages';
 import * as keyUtils from '../../../shared/utils/keys';
+import TabsClient, { TabsClientImpl } from '../../client/TabsClient';
+
+let tabsClient: TabsClient = new TabsClientImpl();
 
 const TARGET_SELECTOR = [
   'a', 'button', 'input', 'textarea', 'area',
@@ -95,27 +98,6 @@ export default class Follow {
     return true;
   }
 
-  openLink(element: HTMLAreaElement|HTMLAnchorElement) {
-    // Browser prevent new tab by link with target='_blank'
-    if (!this.newTab && element.getAttribute('target') !== '_blank') {
-      element.click();
-      return;
-    }
-
-    let href = element.getAttribute('href');
-
-    // eslint-disable-next-line no-script-url
-    if (!href || href === '#' || href.toLowerCase().startsWith('javascript:')) {
-      return;
-    }
-    return browser.runtime.sendMessage({
-      type: messages.OPEN_URL,
-      url: element.href,
-      newTab: true,
-      background: this.background,
-    });
-  }
-
   countHints(sender: any, viewSize: Size, framePosition: Point) {
     this.targets = Follow.getTargetElements(this.win, viewSize, framePosition);
     sender.postMessage(JSON.stringify({
@@ -134,8 +116,13 @@ export default class Follow {
     this.hints = {};
     for (let i = 0; i < keysArray.length; ++i) {
       let keys = keysArray[i];
-      let hint = new Hint(this.targets[i], keys);
+      let target = this.targets[i];
-      this.hints[keys] = hint;
+      if (target instanceof HTMLAnchorElement ||
+        target instanceof HTMLAreaElement) {
+        this.hints[keys] = new LinkHint(target, keys);
+      } else {
+        this.hints[keys] = new InputHint(target, keys);
+      }
     }
   }
 
@@ -154,42 +141,26 @@ export default class Follow {
     this.targets = [];
   }
 
-  activateHints(keys: string) {
+  async activateHints(keys: string): Promise<void> {
     let hint = this.hints[keys];
     if (!hint) {
       return;
     }
-    let element = hint.getTarget();
+
-    switch (element.tagName.toLowerCase()) {
+    if (hint instanceof LinkHint) {
-    case 'a':
+      let url = hint.getLink();
-      return this.openLink(element as HTMLAnchorElement);
+      // ignore taget='_blank'
-    case 'area':
+      if (!this.newTab && hint.getLinkTarget() !== '_blank') {
-      return this.openLink(element as HTMLAreaElement);
+        hint.click();
-    case 'input':
+        return;
-      switch ((element as HTMLInputElement).type) {
-      case 'file':
-      case 'checkbox':
-      case 'radio':
-      case 'submit':
-      case 'reset':
-      case 'button':
-      case 'image':
-      case 'color':
-        return element.click();
-      default:
-        return element.focus();
       }
-    case 'textarea':
+      // eslint-disable-next-line no-script-url
-      return element.focus();
+      if (!url || url === '#' || url.toLowerCase().startsWith('javascript:')) {
-    case 'button':
+        return;
-    case 'summary':
-      return element.click();
-    default:
-      if (dom.isContentEditable(element)) {
-        return element.focus();
-      } else if (element.hasAttribute('tabindex')) {
-        return element.click();
       }
+      await tabsClient.openUrl(url, this.newTab, this.background);
+    } else if (hint instanceof InputHint) {
+      hint.activate();
     }
   }
 

src/content/components/common/hint.ts

@@ -1,62 +0,0 @@
-import * as dom from '../../../shared/utils/dom';
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-const hintPosition = (element: Element): Point => {
-  let { left, top, right, bottom } = dom.viewportRect(element);
-
-  if (element.tagName !== 'AREA') {
-    return { x: left, y: top };
-  }
-
-  return {
-    x: (left + right) / 2,
-    y: (top + bottom) / 2,
-  };
-};
-
-export default class Hint {
-  private target: HTMLElement;
-
-  private element: HTMLElement;
-
-  constructor(target: HTMLElement, tag: string) {
-    let doc = target.ownerDocument;
-    if (doc === null) {
-      throw new TypeError('ownerDocument is null');
-    }
-
-    let { x, y } = hintPosition(target);
-    let { scrollX, scrollY } = window;
-
-    this.target = target;
-
-    this.element = doc.createElement('span');
-    this.element.className = 'vimvixen-hint';
-    this.element.textContent = tag;
-    this.element.style.left = x + scrollX + 'px';
-    this.element.style.top = y + scrollY + 'px';
-
-    this.show();
-    doc.body.append(this.element);
-  }
-
-  show(): void {
-    this.element.style.display = 'inline';
-  }
-
-  hide(): void {
-    this.element.style.display = 'none';
-  }
-
-  remove(): void {
-    this.element.remove();
-  }
-
-  getTarget(): HTMLElement {
-    return this.target;
-  }
-}

src/content/presenters/Hint.ts

@@ -0,0 +1,127 @@
+import * as doms from '../../shared/utils/dom';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+const hintPosition = (element: Element): Point => {
+  let { left, top, right, bottom } = doms.viewportRect(element);
+
+  if (element.tagName !== 'AREA') {
+    return { x: left, y: top };
+  }
+
+  return {
+    x: (left + right) / 2,
+    y: (top + bottom) / 2,
+  };
+};
+
+export default abstract class Hint {
+  private hint: HTMLElement;
+
+  private tag: string;
+
+  constructor(target: HTMLElement, tag: string) {
+    this.tag = tag;
+
+    let doc = target.ownerDocument;
+    if (doc === null) {
+      throw new TypeError('ownerDocument is null');
+    }
+
+    let { x, y } = hintPosition(target);
+    let { scrollX, scrollY } = window;
+
+    let hint = doc.createElement('span');
+    hint.className = 'vimvixen-hint';
+    hint.textContent = tag;
+    hint.style.left = x + scrollX + 'px';
+    hint.style.top = y + scrollY + 'px';
+
+    doc.body.append(hint);
+
+    this.hint = hint;
+    this.show();
+  }
+
+  show(): void {
+    this.hint.style.display = 'inline';
+  }
+
+  hide(): void {
+    this.hint.style.display = 'none';
+  }
+
+  remove(): void {
+    this.hint.remove();
+  }
+
+  getTag(): string {
+    return this.tag;
+  }
+}
+
+export class LinkHint extends Hint {
+  private target: HTMLAnchorElement | HTMLAreaElement;
+
+  constructor(target: HTMLAnchorElement | HTMLAreaElement, tag: string) {
+    super(target, tag);
+
+    this.target = target;
+  }
+
+  getLink(): string {
+    return this.target.href;
+  }
+
+  getLinkTarget(): string | null {
+    return this.target.getAttribute('target');
+  }
+
+  click(): void {
+    this.target.click();
+  }
+}
+
+export class InputHint extends Hint {
+  private target: HTMLElement;
+
+  constructor(target: HTMLElement, tag: string) {
+    super(target, tag);
+
+    this.target = target;
+  }
+
+  activate(): void {
+    let target = this.target;
+    switch (target.tagName.toLowerCase()) {
+    case 'input':
+      switch ((target as HTMLInputElement).type) {
+      case 'file':
+      case 'checkbox':
+      case 'radio':
+      case 'submit':
+      case 'reset':
+      case 'button':
+      case 'image':
+      case 'color':
+        return target.click();
+      default:
+        return target.focus();
+      }
+    case 'textarea':
+      return target.focus();
+    case 'button':
+    case 'summary':
+      return target.click();
+    default:
+      if (doms.isContentEditable(target)) {
+        return target.focus();
+      } else if (target.hasAttribute('tabindex')) {
+        return target.click();
+      }
+    }
+  }
+}

test/content/components/common/hint.test.ts

@@ -1,57 +0,0 @@
-import Hint from 'content/components/common/hint';
-
-describe('Hint class', () => {
-  beforeEach(() => {
-    document.body.innerHTML = __html__['test/content/components/common/hint.html'];
-  });
-
-  describe('#constructor', () => {
-    it('creates a hint element with tag name', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      expect(hint.element.textContent.trim()).to.be.equal('abc');
-    });
-
-    it('throws an exception when non-element given', () => {
-      expect(() => new Hint(window, 'abc')).to.throw(TypeError);
-    });
-  });
-
-  describe('#show', () => {
-    it('shows an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-      hint.show();
-
-      expect(hint.element.style.display).to.not.equal('none');
-    });
-  });
-
-  describe('#hide', () => {
-    it('hides an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-      hint.hide();
-
-      expect(hint.element.style.display).to.equal('none');
-    });
-  });
-
-  describe('#remove', () => {
-    it('removes an element', () => {
-      let link = document.getElementById('test-link');
-      let hint = new Hint(link, 'abc');
-
-      expect(hint.element.parentElement).to.not.be.null;
-      hint.remove();
-      expect(hint.element.parentElement).to.be.null;
-    });
-  });
-
-  describe('#activate', () => {
-    // TODO test activations
-  });
-});
-
-

test/content/presenters/Hint.test.ts

@@ -0,0 +1,158 @@
+import AbstractHint, { LinkHint, InputHint } from '../../../src/content/presenters/Hint';
+import { expect } from 'chai';
+
+class Hint extends AbstractHint {
+}
+
+describe('Hint', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `<a id='test-link' href='#'>link</a>`;
+  });
+
+  describe('#constructor', () => {
+    it('creates a hint element with tag name', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      let elem = document.querySelector('.vimvixen-hint');
+      expect(elem.textContent.trim()).to.be.equal('abc');
+    });
+  });
+
+  describe('#show', () => {
+    it('shows an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+      hint.show();
+
+      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
+      expect(elem.style.display).to.not.equal('none');
+    });
+  });
+
+  describe('#hide', () => {
+    it('hides an element', () => {
+      let link = document.getElementById('test-link') as HTMLElement;
+      let hint = new Hint(link, 'abc');
+      hint.hide();
+
+      let elem = document.querySelector('.vimvixen-hint') as HTMLElement;
+      expect(elem.style.display).to.equal('none');
+    });
+  });
+
+  describe('#remove', () => {
+    it('removes an element', () => {
+      let link = document.getElementById('test-link');
+      let hint = new Hint(link, 'abc');
+
+      let elem = document.querySelector('.vimvixen-hint');
+      expect(elem.parentElement).to.not.be.null;
+      hint.remove();
+      expect(elem.parentElement).to.be.null;
+    });
+  });
+});
+
+describe('LinkHint', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+<a id='test-link1' href='https://google.com/'>link</a>
+<a id='test-link2' href='https://yahoo.com/' target='_blank'>link</a>
+<a id='test-link3' href='#' target='_blank'>link</a>
+`;
+  });
+
+  describe('#getLink()', () => {
+    it('returns value of "href" attribute', () => {
+      let link = document.getElementById('test-link1') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLink()).to.equal('https://google.com/');
+    });
+  });
+
+  describe('#getLinkTarget()', () => {
+    it('returns value of "target" attribute', () => {
+      let link = document.getElementById('test-link1') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLinkTarget()).to.be.null;
+
+      link = document.getElementById('test-link2') as HTMLAnchorElement;
+      hint = new LinkHint(link, 'abc');
+
+      expect(hint.getLinkTarget()).to.equal('_blank');
+    });
+  });
+
+  describe('#click()', () => {
+    it('clicks a element', (done) => {
+      let link = document.getElementById('test-link3') as HTMLAnchorElement;
+      let hint = new LinkHint(link, 'abc');
+      link.onclick = () => { done() };
+
+      hint.click();
+    });
+  });
+});
+
+describe('InputHint', () => {
+  describe('#activate()', () => {
+    context('<input>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<input id='test-input'></input>`;
+      });
+
+      it('focuses to the input', () => {
+        let input = document.getElementById('test-input') as HTMLInputElement;
+        let hint = new InputHint(input, 'abc');
+        hint.activate();
+
+        expect(document.activeElement).to.equal(input);
+      });
+    });
+
+    context('<input type="checkbox">', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<input type="checkbox" id='test-input'></input>`;
+      });
+
+      it('checks and focuses to the input', () => {
+        let input = document.getElementById('test-input') as HTMLInputElement;
+        let hint = new InputHint(input, 'abc');
+        hint.activate();
+
+        expect(input.checked).to.be.true;
+      });
+    });
+    context('<textarea>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<textarea id='test-textarea'></textarea>`;
+      });
+
+      it('focuses to the textarea', () => {
+        let textarea = document.getElementById('test-textarea') as HTMLTextAreaElement;
+        let hint = new InputHint(textarea, 'abc');
+        hint.activate();
+
+        expect(document.activeElement).to.equal(textarea);
+      });
+    });
+
+    context('<button>', () => {
+      beforeEach(() => {
+        document.body.innerHTML = `<button id='test-button'></button>`;
+      });
+
+      it('clicks the button', (done) => {
+        let button = document.getElementById('test-button') as HTMLButtonElement;
+        button.onclick = () => { done() };
+
+        let hint = new InputHint(button, 'abc');
+        hint.activate();
+      });
+    });
+  });
+});