From d1a81a877f0e7364b7d69e214ec74151d76dd25c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 15 Jan 2018 21:56:10 +0900
Subject: [PATCH] focus on visible elements

---
 src/content/focuses.js  |  5 ++++-
 src/content/scrolls.js  | 24 +++---------------------
 src/shared/utils/dom.js | 24 +++++++++++++++++++++++-
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/content/focuses.js b/src/content/focuses.js
index c2658b4..a6f6cc8 100644
--- a/src/content/focuses.js
+++ b/src/content/focuses.js
@@ -1,7 +1,10 @@
+import * as doms from 'shared/utils/dom';
+
 const focusInput = () => {
   let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url'];
   let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(',');
-  let target = window.document.querySelector(inputSelector + ',textarea');
+  let targets = window.document.querySelectorAll(inputSelector + ',textarea');
+  let target = Array.from(targets).find(doms.isVisible);
   if (target) {
     target.focus();
   }
diff --git a/src/content/scrolls.js b/src/content/scrolls.js
index e8e9642..0d1f7c8 100644
--- a/src/content/scrolls.js
+++ b/src/content/scrolls.js
@@ -1,3 +1,5 @@
+import * as doms from 'shared/utils/dom';
+
 const SCROLL_DELTA_X = 48;
 const SCROLL_DELTA_Y = 48;
 const SMOOTH_SCROLL_DURATION = 150;
@@ -5,25 +7,6 @@ const SMOOTH_SCROLL_DURATION = 150;
 // dirty way to store scrolling state on globally
 let scrolling = [false];
 
-const isVisible = (element) => {
-  let rect = element.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) {
-    return false;
-  }
-  if (rect.right < 0 && rect.bottom < 0) {
-    return false;
-  }
-  if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
-    return false;
-  }
-
-  let { display, visibility } = window.getComputedStyle(element);
-  if (display === 'none' || visibility === 'hidden') {
-    return false;
-  }
-  return true;
-};
-
 const isScrollableStyle = (element) => {
   let { overflowX, overflowY } = window.getComputedStyle(element);
   return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
@@ -44,8 +27,7 @@ const findScrollable = (element) => {
     return element;
   }
 
-  let children = Array.prototype
-    .filter.call(element.children, e => isVisible(e));
+  let children = Array.from(element.children).filter(doms.isVisible);
   for (let child of children) {
     let scrollable = findScrollable(child);
     if (scrollable) {
diff --git a/src/shared/utils/dom.js b/src/shared/utils/dom.js
index d4fd68a..f138c33 100644
--- a/src/shared/utils/dom.js
+++ b/src/shared/utils/dom.js
@@ -81,4 +81,26 @@ const viewportRect = (e) => {
   };
 };
 
-export { isContentEditable, viewportRect };
+const isVisible = (element) => {
+  let rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return false;
+  }
+  if (rect.right < 0 && rect.bottom < 0) {
+    return false;
+  }
+  if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
+    return false;
+  }
+  if (element.nodeName === 'INPUT' && element.type.toLowerCase() === 'hidden') {
+    return false;
+  }
+
+  let { display, visibility } = window.getComputedStyle(element);
+  if (display === 'none' || visibility === 'hidden') {
+    return false;
+  }
+  return true;
+};
+
+export { isContentEditable, viewportRect, isVisible };