Merge pull request #93 from ueokande/improve-for-certain-pages

Improve for aberration pages

src/content/components/common/follow.js

@@ -1,9 +1,10 @@
 import messages from 'shared/messages';
 import Hint from './hint';
+import * as dom from 'shared/utils/dom';
 
 const TARGET_SELECTOR = [
   'a', 'button', 'input', 'textarea',
-  '[contenteditable=true]', '[contenteditable=""]'
+  '[contenteditable=true]', '[contenteditable=""]', '[tabindex]'
 ].join(',');
 
 const inViewport = (win, element, viewSize, framePosition) => {
@@ -136,8 +137,11 @@ export default class Follow {
     case 'button':
       return element.click();
     default:
-      // it may contenteditable
-      return element.focus();
+      if (dom.isContentEditable(element)) {
+        return element.focus();
+      } else if (element.hasAttribute('tabindex')) {
+        return element.click();
+      }
     }
   }
 

src/content/components/common/input.js

@@ -1,3 +1,5 @@
+import * as dom from 'shared/utils/dom';
+
 const modifierdKeyName = (name) => {
   if (name.length === 1) {
     return name.toUpperCase();
@@ -78,12 +80,12 @@ export default class InputComponent {
   }
 
   fromInput(e) {
+    if (!e.target) {
+      return false;
+    }
     return e.target instanceof HTMLInputElement ||
       e.target instanceof HTMLTextAreaElement ||
       e.target instanceof HTMLSelectElement ||
-      e.target instanceof HTMLElement &&
-      e.target.hasAttribute('contenteditable') && (
-          e.target.getAttribute('contenteditable').toLowerCase() === 'true' ||
-          e.target.getAttribute('contenteditable').toLowerCase() === '');
+      dom.isContentEditable(e.target);
   }
 }

src/content/scrolls.js

@@ -1,47 +1,112 @@
 const SCROLL_DELTA_X = 48;
 const SCROLL_DELTA_Y = 48;
 
-const scrollVertically = (page, count) => {
-  let x = page.scrollX;
-  let y = page.scrollY + SCROLL_DELTA_X * count;
-  page.scrollTo(x, y);
+const isVisible = (win, element) => {
+  let rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return false;
+  }
+  if (rect.right < 0 && rect.bottom < 0) {
+    return false;
+  }
+  if (win.innerWidth < rect.left && win.innerHeight < rect.top) {
+    return false;
+  }
+
+  let { display, visibility } = win.getComputedStyle(element);
+  if (display === 'none' || visibility === 'hidden') {
+    return false;
+  }
+  return true;
 };
 
-const scrollHorizonally = (page, count) => {
-  let x = page.scrollX + SCROLL_DELTA_Y * count;
-  let y = page.scrollY;
-  page.scrollTo(x, y);
+const isScrollable = (win, element) => {
+  let { overflowX, overflowY } = win.getComputedStyle(element);
+  if (element.tagName !== 'HTML' &&
+    overflowX !== 'scroll' && overflowX !== 'auto' &&
+    overflowY !== 'scroll' && overflowY !== 'auto') {
+    return false;
+  }
+  return element.scrollWidth > element.clientWidth ||
+    element.scrollHeight > element.clientHeight;
 };
 
-const scrollPages = (page, count) => {
-  let height = page.innerHeight;
-  let x = page.scrollX;
-  let y = page.scrollY + height * count;
-  page.scrollTo(x, y);
+// Find a visiable and scrollable element by depth-first search.  Currently
+// this method is called by each scrolling, and the returned value of this
+// method is not cached.  That does not cause performance issue because in the
+// most pages, the window is root element i,e, documentElement.
+const findScrollable = (win, element) => {
+  if (isScrollable(win, element)) {
+    return element;
+  }
+
+  let children = Array.prototype
+    .filter.call(element.children, e => isVisible(win, e));
+  for (let child of children) {
+    let scrollable = findScrollable(win, child);
+    if (scrollable) {
+      return scrollable;
+    }
+  }
+  return null;
 };
 
-const scrollTop = (page) => {
-  let x = page.scrollX;
+const scrollTarget = (win) => {
+  let target = findScrollable(win, win.document.documentElement);
+  if (target) {
+    return target;
+  }
+  return win.document.documentElement;
+};
+
+const scrollVertically = (win, count) => {
+  let target = scrollTarget(win);
+  let x = target.scrollLeft;
+  let y = target.scrollTop + SCROLL_DELTA_Y * count;
+  target.scrollTo(x, y);
+};
+
+const scrollHorizonally = (win, count) => {
+  let target = scrollTarget(win);
+  let x = target.scrollLeft + SCROLL_DELTA_X * count;
+  let y = target.scrollTop;
+  target.scrollTo(x, y);
+};
+
+const scrollPages = (win, count) => {
+  let target = scrollTarget(win);
+  let height = target.innerHeight;
+  let x = target.scrollLeft;
+  let y = target.scrollLeft + height * count;
+  target.scrollTo(x, y);
+};
+
+const scrollTop = (win) => {
+  let target = scrollTarget(win);
+  let x = target.scrollLeft;
   let y = 0;
-  page.scrollTo(x, y);
+  target.scrollTo(x, y);
 };
 
-const scrollBottom = (page) => {
-  let x = page.scrollX;
-  let y = page.scrollMaxY;
-  page.scrollTo(x, y);
+const scrollBottom = (win) => {
+  let target = scrollTarget(win);
+  let x = target.scrollLeft;
+  let y = target.scrollHeight;
+  target.scrollTo(x, y);
 };
 
-const scrollHome = (page) => {
+const scrollHome = (win) => {
+  let target = scrollTarget(win);
   let x = 0;
-  let y = page.scrollY;
-  page.scrollTo(x, y);
+  let y = target.scrollLeft;
+  target.scrollTo(x, y);
 };
 
-const scrollEnd = (page) => {
-  let x = page.scrollMaxX;
-  let y = page.scrollY;
-  page.scrollTo(x, y);
+const scrollEnd = (win) => {
+  let target = scrollTarget(win);
+  let x = target.scrollWidth;
+  let y = target.scrollLeft;
+  target.scrollTo(x, y);
 };
 
 export {

src/shared/utils/dom.js

@@ -0,0 +1,8 @@
+const isContentEditable = (element) => {
+  return element.hasAttribute('contenteditable') && (
+    element.getAttribute('contenteditable').toLowerCase() === 'true' ||
+    element.getAttribute('contenteditable').toLowerCase() === ''
+  );
+};
+
+export { isContentEditable };