Bug 1461522 - Factor out a focusableSelector utility; r=jdescottes

We will use this later when we introduce a MenuList class since it will want to
manage focus for its menu items.

This patch also extends the definition of focusable elements somewhat.

MozReview-Commit-ID: 3shnC0t79rF

--HG--
extra : rebase_source : 177e05adeef9708bdb78d46fda5286216db6cbb7

devtools/client/shared/focus.js

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Simplied selector targetting elements that can receive the focus, full
+// version at
+// http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
+// .
+exports.focusableSelector = [
+  "a[href]:not([tabindex='-1'])",
+  "button:not([disabled]):not([tabindex='-1'])",
+  "iframe:not([tabindex='-1'])",
+  "input:not([disabled]):not([tabindex='-1'])",
+  "select:not([disabled]):not([tabindex='-1'])",
+  "textarea:not([disabled]):not([tabindex='-1'])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");

devtools/client/shared/moz.build

@@ -30,6 +30,7 @@ DevToolsModules(
     'DOMHelpers.jsm',
     'enum.js',
     'file-saver.js',
+    'focus.js',
     'getjson.js',
     'inplace-editor.js',
     'key-shortcuts.js',

devtools/client/shared/widgets/tooltip/HTMLTooltip.js

@@ -8,6 +8,7 @@
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const {TooltipToggle} = require("devtools/client/shared/widgets/tooltip/TooltipToggle");
+const {focusableSelector} = require("devtools/client/shared/focus");
 const {getCurrentZoom} = require("devtools/shared/layout/utils");
 const {listenOnce} = require("devtools/shared/async-utils");
 
@@ -759,13 +760,10 @@ HTMLTooltip.prototype = {
   },
 
   /**
-   * If the tootlip is configured to autofocus and a focusable element can be found,
-   * focus it.
+   * If the tooltip is configured to autofocus and a focusable element can be
+   * found, focus it.
    */
   _maybeFocusTooltip: function() {
-    // Simplied selector targetting elements that can receive the focus, full version at
-    // http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus .
-    const focusableSelector = "a, button, iframe, input, select, textarea";
     const focusableElement = this.panel.querySelector(focusableSelector);
     if (this.autofocus && focusableElement) {
       focusableElement.focus();