extensions: focus options overlay content when shown.

This matches other webui dialogs' (settings) behavior by setting initial
focus when a dialog is shown.

To fully match we need to also restore focus when the dialog is closed,
which we'll do when it's easier (i.e. when the page isn't totally
rebuilt all the time).

BUG=438301
R=kalman@chromium.org

Review URL: https://codereview.chromium.org/900623003

Cr-Commit-Position: refs/heads/master@{#314629}

chrome/browser/resources/extensions/extension_list.js

@@ -567,20 +567,37 @@ cr.define('options', function() {
 
       if (scroll)
         this.scrollToNode_(extensionId);
+
+      document.activeElement.blur();
+
       // Add the options query string. Corner case: the 'options' query string
       // will clobber the 'id' query string if the options link is clicked when
       // 'id' is in the URL, or if both query strings are in the URL.
       uber.replaceState({}, '?options=' + extensionId);
 
-      extensions.ExtensionOptionsOverlay.getInstance().
-          setExtensionAndShowOverlay(extensionId,
-                                     extension.name,
-                                     extension.icon);
+      var shownCallback = function() {
+        if (cr.ui.FocusOutlineManager.forDocument(document).visible)
+          overlay.setInitialFocus();
+      };
 
+      var overlay = extensions.ExtensionOptionsOverlay.getInstance();
+      overlay.setExtensionAndShowOverlay(extensionId, extension.name,
+                                         extension.icon, shownCallback);
       this.optionsShown_ = true;
-      $('overlay').addEventListener('cancelOverlay', function() {
-        this.optionsShown_ = false;
-      }.bind(this));
+
+      var self = this;
+      $('overlay').addEventListener('cancelOverlay', function f() {
+        // Restore focus instead of just blurring when this page isn't rebuild
+        // crazy. http://crbug.com/450818
+        document.activeElement.blur();
+        self.optionsShown_ = false;
+        $('overlay').removeEventListener('cancelOverlay', f);
+      });
+
+      // TODO(dbeam): guestview's focus is weird. Only when this is called from
+      // within this event handler *and* after the showing animation completes
+      // does this work.
+      shownCallback();
     },
   };
 

chrome/browser/resources/extensions/extension_options_overlay.js

@@ -40,6 +40,16 @@ cr.define('extensions', function() {
       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.
@@ -47,10 +57,7 @@ cr.define('extensions', function() {
      */
     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);
 
@@ -67,6 +74,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.
      * @suppress {checkTypes}
      * TODO(vitalyp): remove the suppression after adding
      * chrome/renderer/resources/extensions/extension_options.js
@@ -74,7 +83,8 @@ cr.define('extensions', function() {
      */
     setExtensionAndShowOverlay: function(extensionId,
                                          extensionName,
-                                         extensionIcon) {
+                                         extensionIcon,
+                                         shownCallback) {
       var overlay = $('extension-options-overlay');
       var overlayHeader = $('extension-options-overlay-header');
       var overlayGuest = $('extension-options-overlay-guest');
@@ -125,9 +135,9 @@ cr.define('extensions', function() {
             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'}
@@ -138,13 +148,19 @@ cr.define('extensions', function() {
 
         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);
 

chrome/browser/ui/webui/extensions/extension_settings_browsertest.js

@@ -129,11 +129,14 @@ ExtensionSettingsWebUITestWithExtensionInstalled.prototype = {
   }
 };
 
-TEST_F('ExtensionSettingsWebUITestWithExtensionInstalled',
-       'baseAccessibilityIsOk', function() {
+/** @this {ExtensionSettingsWebUITestWithExtensionInstalled} */
+function runAudit() {
   assertEquals(this.browsePreload, document.location.href);
   this.runAccessibilityAudit();
-});
+}
+
+TEST_F('ExtensionSettingsWebUITestWithExtensionInstalled',
+       'baseAccessibilityIsOk', runAudit);
 
 /**
  * @constructor
@@ -152,7 +155,20 @@ ManagedExtensionSettingsWebUITest.prototype = {
   },
 };
 
-TEST_F('ManagedExtensionSettingsWebUITest', 'testAccessibility', function() {
-  assertEquals(this.browsePreload, document.location.href);
-  this.runAccessibilityAudit();
-});
+TEST_F('ManagedExtensionSettingsWebUITest', 'testAccessibility', runAudit);
+
+/**
+ * @constructor
+ * @extends {ExtensionSettingsWebUITestWithExtensionInstalled}
+ */
+function ExtensionOptionsDialogsWebUITest() {}
+
+ExtensionOptionsDialogsWebUITest.prototype = {
+  __proto__: ExtensionSettingsWebUITestWithExtensionInstalled.prototype,
+
+  /** @override */
+  browsePreload: ExtensionSettingsWebUITest.prototype.browsePreload +
+      '?options=ldnnhddmnhbkjipkidpdiheffobcpfmf',
+};
+
+TEST_F('ExtensionOptionsDialogsWebUITest', 'testAccessibility', runAudit);