Merge pull request #308 from ueokande/focus-input

Focus input

README.md

@@ -50,6 +50,7 @@ The default mappings are as follows:
 - <kbd>[</kbd><kbd>[</kbd>, <kbd>]</kbd><kbd>]</kbd>: find  prev or next links and open it
 - <kbd>g</kbd><kbd>u</kbd>: go to parent directory
 - <kbd>g</kbd><kbd>U</kbd>: go to root directory
+- <kbd>g</kbd><kbd>i</kbd>, <kbd>G</kbd>: focus first input
 
 #### Misc
 - <kbd>z</kbd><kbd>i</kbd>, <kbd>z</kbd><kbd>o</kbd>: zoom-in/zoom-out

src/content/actions/operation.js

@@ -2,6 +2,7 @@ import operations from 'shared/operations';
 import messages from 'shared/messages';
 import * as scrolls from 'content/scrolls';
 import * as navigates from 'content/navigates';
+import * as focuses from 'content/focuses';
 import * as urls from 'content/urls';
 import * as consoleFrames from 'content/console-frames';
 import * as addonActions from './addon';
@@ -57,6 +58,8 @@ const exec = (operation, repeat, settings) => {
     return navigates.parent(window);
   case operations.NAVIGATE_ROOT:
     return navigates.root(window);
+  case operations.FOCUS_INPUT:
+    return focuses.focusInput();
   case operations.URLS_YANK:
     urls.yank(window);
     return consoleFrames.postMessage(window.document, {

src/content/focuses.js

@@ -0,0 +1,13 @@
+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 targets = window.document.querySelectorAll(inputSelector + ',textarea');
+  let target = Array.from(targets).find(doms.isVisible);
+  if (target) {
+    target.focus();
+  }
+};
+
+export { focusInput };

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/settings/components/form/keymaps-form.jsx

@@ -36,6 +36,7 @@ const KeyMapFields = [
     ['navigate.link.prev', 'Open previous link'],
     ['navigate.parent', 'Go to parent directory'],
     ['navigate.root', 'Go to root directory'],
+    ['focus.input', 'Focus input'],
   ], [
     ['find.start', 'Start find mode'],
     ['find.next', 'Find next word'],

src/shared/operations.js

@@ -31,6 +31,9 @@ export default {
   NAVIGATE_PARENT: 'navigate.parent',
   NAVIGATE_ROOT: 'navigate.root',
 
+  // Focus
+  FOCUS_INPUT: 'focus.input',
+
   // Tabs
   TAB_CLOSE: 'tabs.close',
   TAB_CLOSE_FORCE: 'tabs.close.force',

src/shared/settings/default.js

@@ -45,6 +45,7 @@ export default {
     "]]": { "type": "navigate.link.next" },
     "gu": { "type": "navigate.parent" },
     "gU": { "type": "navigate.root" },
+    "gi": { "type": "focus.input" },
     "y": { "type": "urls.yank" },
     "p": { "type": "urls.paste", "newTab": false },
     "P": { "type": "urls.paste", "newTab": true },

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