DOMUI Prefs: Keep focus within the topmost page/overlay

chrome/browser/resources/options/options_page.js

 // Copyright (c) 2010 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
@@ skipping 111 matching lines @@
       this.registeredOverlayPages[overlayName].visible = true;
     }
   };
 
   /**
    * Returns whether or not an overlay is visible.
    * @return {boolean} True if an overlay is visible.
    * @private
    */
   OptionsPage.isOverlayVisible_ = function() {
-    for (var name in this.registeredOverlayPages) {
-      if (this.registeredOverlayPages[name].visible)
-        return true;
-    }
-    return false;
+    return this.getVisibleOverlay_() != null;
   };
 
   /**
+   * Returns the currently visible overlay, or null if no page is visible.
+   * @return {OptionPage} The visible overlay.
+   */
+  OptionsPage.getVisibleOverlay_ = function() {
+    for (var name in this.registeredOverlayPages) {
+      var page = this.registeredOverlayPages[name];
+      if (page.visible)
+        return page;
+    }
+    return null;
+  };
+
+  /**
    * Clears overlays (i.e. hide all overlays).
    */
   OptionsPage.clearOverlays = function() {
      for (var name in this.registeredOverlayPages) {
        var page = this.registeredOverlayPages[name];
        page.visible = false;
      }
   };
 
   /**
    * Returns the topmost visible page, or null if no page is visible.
    * @return {OptionPage} The topmost visible page.
    */
   OptionsPage.getTopmostVisiblePage = function() {
     var topPage = null;
     for (var name in this.registeredPages) {
       var page = this.registeredPages[name];
       if (page.visible &&
           (!topPage || page.nestingLevel > topPage.nestingLevel))
         topPage = page;
     }
     return topPage;
-  }
+  };
 
   /**
    * Closes the topmost open subpage, if any.
    */
   OptionsPage.closeTopSubPage = function() {
     var topPage = this.getTopmostVisiblePage();
     if (topPage && topPage.parentPage)
       topPage.visible = false;
   };
 
@@ skipping 169 matching lines @@
     // Hook up the close buttons.
     subpageCloseButtons = document.querySelectorAll('.close-subpage');
     for (var i = 0; i < subpageCloseButtons.length; i++) {
       subpageCloseButtons[i].onclick = function() {
         self.closeTopSubPage();
       };
     };
 
     // Install handler for key presses.
     document.addEventListener('keydown', this.keyDownEventHandler_.bind(this));
+
+    document.addEventListener('focus', this.manageFocusChange_.bind(this),

[James Hawkins, 2011/01/26 01:29:41]

nit: All params on one line or lined up in one column.

[stuartmorgan, 2011/01/26 17:27:03]

The style guide explicitly allows either form.

[James Hawkins, 2011/01/26 18:08:25]

Interesting. I had been told otherwise by a reputable source, but I now see in
the style guide that I was incorrect.

+                              true);
   };
 
   /**
    * Returns a function to handle clicks behind a subpage at level |level| by
    * closing all subpages down to |level| - 1.
    * @param {number} level The level of the subpage being handled.
    * @return {Function} a function to handle clicks outside the given subpage.
    * @private
    */
   OptionsPage.subPageClosingClickHandler_ = function(level) {
     var self = this;
     return function(event) {
       // Clicks on the narrow strip between the left of the subpage sheet and
       // that shows part of the parent page should close the overlay, but
       // not fall through to the parent page.
       if (!$('subpage-sheet-' + level).contains(event.target)) {
         self.closeSubPagesToLevel(level - 1);
         event.stopPropagation();
         event.preventDefault();
       }
     };
   };
 
   /**
+   * Called when focus changes; ensures that focus doesn't move outside
+   * the topmost subpage/overlay.
+   * @param {Event} e The focus change event.
+   * @private
+   */
+  OptionsPage.manageFocusChange_ = function(e) {
+    var tabLoopRoot = null;

[James Hawkins, 2011/01/26 01:29:41]

This var name is a little confusing.

[stuartmorgan, 2011/01/26 17:27:03]

Changed to focusableItemsRoot; hopefully that's a bit clearer.

+    // If an overlay is visible, that defines the tab loop

[James Hawkins, 2011/01/26 01:29:41]

nit: Period at end of sentence.

[stuartmorgan, 2011/01/26 17:27:03]

Done.

+    var topPage = this.getVisibleOverlay_();
+    if (topPage)
+      tabLoopRoot = topPage.pageDiv;
+    // If a subpage is visible, use its parent as the tab loop constraint.
+    // (The parent is used because it contains the close button.)
+    if (!topPage) {
+      var topPage = this.getTopmostVisiblePage();
+      if (topPage && topPage.nestingLevel > 0)
+        tabLoopRoot = topPage.pageDiv.parentNode;
+    }
+
+    if (tabLoopRoot && !tabLoopRoot.contains(e.target)) {

[James Hawkins, 2011/01/26 01:29:41]

nit: No need for braces.

[stuartmorgan, 2011/01/26 17:27:03]

Done.

+      topPage.focusFirstElement();
+    }
+  };
+
+  /**
    * A function to handle mouse events (mousedown or click) on the html body by
    * closing subpages and/or stopping event propagation.
    * @return {Event} a mousedown or click event.
    * @private
    */
   OptionsPage.bodyMouseEventHandler_ = function(event) {
     // Do nothing if a subpage isn't showing.
     var topPage = this.getTopmostVisiblePage();
     if (!(topPage && topPage.parentPage))
       return;
@@ skipping 149 matching lines @@
         }
         if (this.tab) {
           this.tab.classList.remove('navbar-item-selected');
         }
       }
 
       cr.dispatchPropertyChange(this, 'visible', visible, !visible);
     },
 
     /**
+     * Focuses the first control on the page.
+     */
+    focusFirstElement: function() {
+      // Sets focus on the first interactive element in the page.
+      focusElement = this.pageDiv.querySelector('button, input, list, select');
+      if (focusElement)
+        focusElement.focus();
+    },
+
+    /**
      * The nesting level of this page.
      * @type {number} The nesting level of this page (0 for top-level page)
      */
     get nestingLevel() {
       var level = 0;
       var parent = this.parentPage;
       while (parent) {
         level++;
         parent = parent.parentPage;
       }
@@ skipping 36 matching lines @@
       OptionsPage.showOverlay(hash);
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 
 });