extensions: fix focus management for all dialogs (not just options).

chrome/browser/resources/extensions/extensions.js

 // Copyright (c) 2012 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.
 
 <include src="../uber/uber_utils.js">
 <include src="extension_code.js">
 <include src="extension_commands_overlay.js">
 <include src="extension_error_overlay.js">
 <include src="extension_focus_manager.js">
 <include src="extension_list.js">
@@ skipping 356 matching lines @@
    * Returns the current overlay or null if one does not exist.
    * @return {Element} The overlay element.
    */
   ExtensionSettings.getCurrentOverlay = function() {
     return document.querySelector('#overlay .page.showing');
   };
 
   /**
    * Sets the given overlay to show. This hides whatever overlay is currently
    * showing, if any.
    * @param {HTMLElement} node The overlay page to show. If falsey, all overlays

[not at google - send to devlin, 2015/02/06 21:31:38]

You might as well fix this comment - |node| certainly can't be "falsey" (unless
it's some kind of JS term for something-resembling-false), hopefully just "null"
so that the {HTMLElement} annotation holds.

[Dan Beam, 2015/02/06 21:50:02]

Done.

    *     are hidden.
    */
   ExtensionSettings.showOverlay = function(node) {
     var pageDiv = $('extension-settings');
-    if (node) {
-      pageDiv.style.width = window.getComputedStyle(pageDiv).width;
-      document.body.classList.add('no-scroll');
-    } else {
-      document.body.classList.remove('no-scroll');
-      pageDiv.style.width = '';
-    }
+    pageDiv.style.width = node ? window.getComputedStyle(pageDiv).width : '';
+    document.body.classList.toggle('no-scroll', node);
 
     var currentlyShowingOverlay = ExtensionSettings.getCurrentOverlay();
     if (currentlyShowingOverlay) {
       currentlyShowingOverlay.classList.remove('showing');
       cr.dispatchSimpleEvent($('overlay'), 'cancelOverlay');
     }
 
     if (node) {
-      if (document.activeElement != document.body)
-        document.activeElement.blur();
+      var lastFocused = document.activeElement;
+      $('overlay').addEventListener('cancelOverlay', function f() {
+        lastFocused.focus();

[not at google - send to devlin, 2015/02/06 21:31:38]

Correct me if I'm wrong (in which case I'm trying this patch out wrong), but
this won't actually work until the patch for not rebuilding the page goes in.
Currently, when the options dialogue is closed, it closes the options page which
causes a View change in the extension which causes the extensions page to
re-render, killing focus anyway.

Still seems like the right change to make, though.

[Dan Beam, 2015/02/06 21:50:02]

i know
right

+        $('overlay').removeEventListener('cancelOverlay', f);
+      });
       node.classList.add('showing');
     }
 
     var pages = document.querySelectorAll('.page');
     for (var i = 0; i < pages.length; i++) {
       pages[i].setAttribute('aria-hidden', node ? 'true' : 'false');
     }
 
     $('overlay').hidden = !node;
+
+    if (node)
+      ExtensionSettings.focusOverlay();
+
     uber.invokeMethodOnParent(node ? 'beginInterceptingEvents' :
                                      'stopInterceptingEvents');
   };
 
+  ExtensionSettings.focusOverlay = function() {
+    var currentlyShowingOverlay = ExtensionSettings.getCurrentOverlay();
+    assert(currentlyShowingOverlay);
+
+    if (cr.ui.FocusOutlineManager.forDocument(document).visible) {
+      var extraToFocus = '#extension-options-overlay-guest extensionoptions';
+      cr.ui.setInitialFocus(currentlyShowingOverlay, extraToFocus);
+    }
+
+    if (!currentlyShowingOverlay.contains(document.activeElement)) {
+      // Make sure focus isn't stuck behind the overlay.
+      document.activeElement.blur();
+    }
+  };
+
   /**
    * Utility function to find the width of various UI strings and synchronize
    * the width of relevant spans. This is crucial for making sure the
    * Enable/Enabled checkboxes align, as well as the Developer Mode checkbox.
    */
   function measureCheckboxStrings() {
     var trashWidth = 30;
     var measuringDiv = $('font-measuring-div');
     measuringDiv.textContent =
         loadTimeData.getString('extensionSettingsEnabled');
@@ skipping 22 matching lines @@
 
   // Export
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 window.addEventListener('load', function(e) {
   extensions.ExtensionSettings.getInstance().initialize();
 });