support following area tags

src/content/components/common/follow.js

@@ -3,17 +3,18 @@ import Hint from './hint';
 import * as dom from 'shared/utils/dom';
 
 const TARGET_SELECTOR = [
-  'a', 'button', 'input', 'textarea',
+  'a', 'button', 'input', 'textarea', 'area',
   '[contenteditable=true]', '[contenteditable=""]', '[tabindex]'
 ].join(',');
 
+
 const inViewport = (win, element, viewSize, framePosition) => {
   let {
     top, left, bottom, right
-  } = element.getBoundingClientRect();
-  let doc = win.doc;
-  let frameWidth = win.innerWidth || doc.documentElement.clientWidth;
-  let frameHeight = win.innerHeight || doc.documentElement.clientHeight;
+  } = dom.viewportRect(element);
+  let doc = win.document;
+  let frameWidth = doc.documentElement.clientWidth;
+  let frameHeight = doc.documentElement.clientHeight;
 
   if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) {
     // out of frame
@@ -115,6 +116,7 @@ export default class Follow {
     let element = hint.target;
     switch (element.tagName.toLowerCase()) {
     case 'a':
+    case 'area':
       return this.openLink(element);
     case 'input':
       switch (element.type) {
@@ -162,7 +164,9 @@ export default class Follow {
     let all = win.document.querySelectorAll(TARGET_SELECTOR);
     let filtered = Array.prototype.filter.call(all, (element) => {
       let style = win.getComputedStyle(element);
-      return style.display !== 'none' &&
+
+      // AREA's 'display' in Browser style is 'none'
+      return (element.tagName === 'AREA' || style.display !== 'none') &&
         style.visibility !== 'hidden' &&
         element.type !== 'hidden' &&
         element.offsetHeight > 0 &&

src/content/components/common/hint.js

@@ -1,4 +1,18 @@
 import './hint.css';
+import * as dom from 'shared/utils/dom';
+
+const hintPosition = (element) => {
+  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 {
   constructor(target, tag) {
@@ -9,14 +23,14 @@ export default class Hint {
     this.target = target;
 
     let doc = target.ownerDocument;
-    let { top, left } = target.getBoundingClientRect();
+    let { x, y } = hintPosition(target);
     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.element.style.left = x + scrollX + 'px';
+    this.element.style.top = y + scrollY + 'px';
 
     this.show();
     doc.body.append(this.element);

src/shared/utils/dom.js

@@ -5,4 +5,80 @@ const isContentEditable = (element) => {
   );
 };
 
-export { isContentEditable };
+const rectangleCoordsRect = (coords) => {
+  let [left, top, right, bottom] = coords.split(',').map(n => Number(n));
+  return { left, top, right, bottom };
+};
+
+const circleCoordsRect = (coords) => {
+  let [x, y, r] = coords.split(',').map(n => Number(n));
+  return {
+    left: x - r,
+    top: y - r,
+    right: x + r,
+    bottom: y + r,
+  };
+};
+
+const polygonCoordsRect = (coords) => {
+  let params = coords.split(',');
+  let minx = Number(params[0]),
+    maxx = Number(params[0]),
+    miny = Number(params[1]),
+    maxy = Number(params[1]);
+  let len = Math.floor(params.length / 2);
+  for (let i = 2; i < len; i += 2) {
+    let x = Number(params[i]),
+      y = Number(params[i + 1]);
+    if (x < minx) {
+      minx = x;
+    }
+    if (x > maxx) {
+      maxx = x;
+    }
+    if (y < miny) {
+      miny = y;
+    }
+    if (y > maxy) {
+      maxy = y;
+    }
+  }
+  return { left: minx, top: miny, right: maxx, bottom: maxy };
+};
+
+const viewportRect = (e) => {
+  if (e.tagName !== 'AREA') {
+    return e.getBoundingClientRect();
+  }
+
+  let mapElement = e.parentNode;
+  let imgElement = document.querySelector(`img[usemap="#${mapElement.name}"]`);
+  let {
+    left: mapLeft,
+    top: mapTop
+  } = imgElement.getBoundingClientRect();
+  let coords = e.getAttribute('coords');
+  let rect = { left: 0, top: 0, right: 0, bottom: 0 };
+  switch (e.getAttribute('shape')) {
+  case 'rect':
+  case 'rectangle':
+    rect = rectangleCoordsRect(coords);
+    break;
+  case 'circ':
+  case 'circle':
+    rect = circleCoordsRect(coords);
+    break;
+  case 'poly':
+  case 'polygon':
+    rect = polygonCoordsRect(coords);
+    break;
+  }
+  return {
+    left: rect.left + mapLeft,
+    top: rect.top + mapTop,
+    right: rect.right + mapLeft,
+    bottom: rect.bottom + mapTop,
+  };
+};
+
+export { isContentEditable, viewportRect };