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

chrome/browser/resources/extensions/extension_options_overlay.js

Index: chrome/browser/resources/extensions/extension_options_overlay.js
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.js b/chrome/browser/resources/extensions/extension_options_overlay.js
index eb15741494d56b13a29cacee6ee97211b873681a..e97bf1a8250a29f0287f5dac41d894fc03e7f05f 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.js
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -44,7 +44,10 @@ cr.define('extensions', function() {
       this.getExtensionOptions_().focus();
     },
 
-    /** @return {?Element} */
+    /**
+     * @return {?Element}
+     * @private
+     */
     getExtensionOptions_: function() {
       return $('extension-options-overlay-guest').querySelector(
           'extensionoptions');
@@ -74,8 +77,8 @@ cr.define('extensions', function() {
      * @param {string} extensionName The name of the extension, which is used
      *     as the header of the overlay.
      * @param {string} extensionIcon The URL of the extension's icon.
-     * @param {function():void} shownCallback A function called when show
-     *     animation completes.
+     * @param {function():void} shownCallback A function called when
+     *     showing completes.
      * @suppress {checkTypes}
      * TODO(vitalyp): remove the suppression after adding
      * chrome/renderer/resources/extensions/extension_options.js
@@ -93,8 +96,6 @@ cr.define('extensions', function() {
       $('extension-options-overlay-title').textContent = extensionName;
       $('extension-options-overlay-icon').src = extensionIcon;
 
-      this.setVisible_(true);
-
       var extensionoptions = new window.ExtensionOptions();
       extensionoptions.extension = extensionId;
 
@@ -178,6 +179,9 @@ cr.define('extensions', function() {
       overlayGuest.style.height = '';
 
       overlayGuest.appendChild(extensionoptions);
+
+      // Show the dialog after extensionoptions is in the DOM so it gets focus.
+      this.setVisible_(true);

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

Unfortunately showing the overlay early serves a purpose - the extensionoptions
element grows to fit the width of the dialogue, and then the preferred size
logic kicks in, and we resize the dialogue accordingly. Importantly, the width
starts off at the width of the dialogue.

Showing it late means that on construction the width is 0 so the initial
preferred size rendering is like:

This
Is
An
Options
Page

rather than:

This Is An
Options Page

... or whatever. This is similar to crbug.com/431001. The point is, it has a
huge height, so the overlay sizes itself large, but never shrinks. You end up
getting a really tall overlay with a lot of whitespace at the bottom.

If you want to test this, grab
https://github.com/kalman/chrome-extensions/tree/master/browser-clock and change
the manifest from {"options_page": "options.html"} to {"options_ui": {"page":
"options.html"}}.

The real way to fix all of this - which would also address crbug.com/408274 I
think - is to attach the ExtensionOptions element off-screen to something, wait
for it to render (pulling the initial width from somewhere, wherever the
dialogue gets it from) detatch() it (not available yet, see
https://codereview.chromium.org/867393002/), then re-attach it, then set the
dialogue to visible.

I understand if you don't want to do this now.

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

i don't ;), moved back

     },
 
     /**