focus on visible elements

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();
   }

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
+  let children = Array.from(element.children).filter(doms.isVisible);
-    .filter.call(element.children, e => isVisible(e));
   for (let child of children) {
     let scrollable = findScrollable(child);
     if (scrollable) {

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 };