extensions: focus options overlay content when shown.

chrome/browser/resources/extensions/extension_options_overlay.js

 // Copyright 2014 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('extensions', function() {
   'use strict';
 
   /**
    * The ExtensionOptionsOverlay will show an extension's options page using
    * an <extensionoptions> element.
@@ skipping 22 matching lines @@
     initializePage: function(showOverlay) {
       var overlay = $('overlay');
 
       cr.ui.overlay.setupOverlay(overlay);
       cr.ui.overlay.globalInitialization();
       overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this));
 
       this.showOverlay_ = showOverlay;
     },
 
+    setInitialFocus: function() {
+      this.getExtensionOptions_().focus();
+    },
+
+    /** @return {?Element} */
+    getExtensionOptions_: function() {
+      return $('extension-options-overlay-guest').querySelector(
+          'extensionoptions');
+    },
+
     /**
      * Handles a click on the close button.
      * @param {Event} event The click event.
      * @private
      */
     handleDismiss_: function(event) {
       this.setVisible_(false);
-      var extensionoptions =
-          $('extension-options-overlay-guest')
-              .querySelector('extensionoptions');
-
+      var extensionoptions = this.getExtensionOptions_();
       if (extensionoptions)
         $('extension-options-overlay-guest').removeChild(extensionoptions);
 
       $('extension-options-overlay-icon').removeAttribute('src');
 
       // Remove the options query string.
       uber.replaceState({}, '');
     },
 
     /**
      * Associate an extension with the overlay and display it.
      * @param {string} extensionId The id of the extension whose options page
      *     should be displayed in the overlay.
      * @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.
      * @suppress {checkTypes}
      * TODO(vitalyp): remove the suppression after adding
      * chrome/renderer/resources/extensions/extension_options.js
      * to dependencies.
      */
     setExtensionAndShowOverlay: function(extensionId,
                                          extensionName,
-                                         extensionIcon) {
+                                         extensionIcon,
+                                         shownCallback) {
       var overlay = $('extension-options-overlay');
       var overlayHeader = $('extension-options-overlay-header');
       var overlayGuest = $('extension-options-overlay-guest');
       var overlayStyle = window.getComputedStyle(overlay);
 
       $('extension-options-overlay-title').textContent = extensionName;
       $('extension-options-overlay-icon').src = extensionIcon;
 
       this.setVisible_(true);
 
@@ skipping 30 matching lines @@
         var newHeight = Math.min(evt.height, maxHeight);
 
         // animationTime is the amount of time in ms that will be used to resize
         // the overlay. It is calculated by multiplying the pythagorean distance
         // between old and the new size (in px) with a constant speed of
         // 0.25 ms/px.
         var animationTime = 0.25 * Math.sqrt(
             Math.pow(newWidth - oldWidth, 2) +
             Math.pow(newHeight - oldHeight, 2));
 
-        if (animation) {
+        if (animation)
           animation.cancel();
-        }
+
         animation = overlay.animate([
           {width: oldWidth + 'px', height: oldHeight + 'px'},
           {width: newWidth + 'px', height: newHeight + 'px'}
         ], {
           duration: animationTime,
           delay: 0
         });
 
         animation.onfinish = function(e) {
           animation = null;
+
           // The <extensionoptions> element is ready to place back in the
-          // overlay. Make sure that it's sized to take up the full
-          // width/height of the overlay.
+          // overlay. Make sure that it's sized to take up the full width/height
+          // of the overlay.
           overlayGuest.style.position = '';
           overlayGuest.style.left = '';
           overlayGuest.style.width = newWidth + 'px';
           overlayGuest.style.height = newHeight + 'px';
+
+          if (shownCallback) {
+            shownCallback();
+            shownCallback = null;
+          }
         };
       }.bind(this);
 
       // Move the <extensionoptions> off screen until the overlay is ready.
       overlayGuest.style.position = 'fixed';
       overlayGuest.style.left = window.outerWidth + 'px';
       // Begin rendering at the default dimensions. This is also necessary to
       // cancel any width/height set on a previous render.
       // TODO(kalman): This causes a visual jag where the overlay guest shows
       // up briefly. It would be better to render this off-screen first, then
@@ skipping 15 matching lines @@
           /** @type {HTMLDivElement} */($('extension-options-overlay')) :
           null);
     }
   };
 
   // Export
   return {
     ExtensionOptionsOverlay: ExtensionOptionsOverlay
   };
 });