[Reland] Extensions: Focus correct button on options dialog close.

Also fix some const references surfaced by presubmit.

Reason for revert:
browser_tests are run in parallel, so they were failing on the focus
check sometimes, thus introducing flakiness.

Fix to prevent flakiness:
Changed test to an interactive_ui_test because they are run in series.

Bug: 912026
Change-Id: I3385a0e55daabb4bade7aedc77f329c5b22d9de6
Reviewed-on: https://chromium-review.googlesource.com/c/1444691
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#629847}

chrome/browser/resources/md_extensions/detail_view.js

@@ -47,6 +47,14 @@ cr.define('extensions', function() {
       'view-enter-start': 'onViewEnterStart_',
     },
 
+    /**
+     * Focuses the extensions options button. This should be used after the
+     * dialog closes.
+     */
+    focusOptionsButton: function() {
+      this.$$('#extensions-options').focus();
+    },
+
     /**
      * Focuses the back button when page is loaded.
      * @private

chrome/browser/resources/md_extensions/manager.js

@@ -458,7 +458,6 @@ cr.define('extensions', function() {
 
       const optionsDialog = this.$$('#options-dialog');
       if (optionsDialog && optionsDialog.open) {
-        optionsDialog.close();
         this.showOptionsDialog_ = false;
       }
 
@@ -535,6 +534,7 @@ cr.define('extensions', function() {
     /** @private */
     onOptionsDialogClose_: function() {
       this.showOptionsDialog_ = false;
+      this.$$('extensions-detail-view').focusOptionsButton();
     },
 
     /** @private */

chrome/test/BUILD.gn

@@ -5219,6 +5219,13 @@ if (!is_android) {
       # target should be deleted and this line removed. See the
       # chrome_extensions_interactive_uitests target for more.
       deps += [ "//extensions:chrome_extensions_interactive_uitests" ]
+
+      if (include_js_tests) {
+        sources += [
+          "../browser/ui/webui/extensions/extension_settings_browsertest.cc",
+          "../browser/ui/webui/extensions/extension_settings_browsertest.h",
+        ]
+      }
     }
 
     if (!enable_native_notifications) {

chrome/test/data/extensions/options_page_in_view/manifest.json

 {
   "name": "Extension With Options Page",
   "description": "An extension with an options page and an extra page",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm3v3jAleGUmPIlw9zsz5xfNE0uP41ZguA2nz4sM6Dy477Ve8rLMwqdsDjxDDnHWdIxNsGkXQbP+Yo8jhH/tEc1lo780b5T3Sjj+ULKsW/lunxQV35Q4x5UNs0vryQvVZZCn4euYSn66XtRGIe4+3nq55cw8HgF2Ex3r7jJ3jRzQg0LV9j1JyoibkjwAqxvdYdnHtMvVfJPTo8NoTrFFZbq1qBQTZCvZKIFJX/iwY/ib3AnH+DCnc1jj2mBuoOoNYHuRwYt/7uCmst8UNSr47deNlv4neCh5IIWZjz6AROFRUGFrIcP6s3f1FiOQoGGAD5x7adL2zAsScNqyCm2TczQIDAQAB",
   "options_ui": { "page": "options.html", "open_in_tab": false },
   "version": "0.1.1",
   "manifest_version": 2

chrome/test/data/webui/BUILD.gn

@@ -12,6 +12,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "bookmarks/bookmarks_focus_test.js",
     "cr_elements/cr_elements_focus_test.js",
     "cr_focus_row_behavior_interactive_test.js",
+    "extensions/cr_extensions_interactive_ui_tests.js",
     "history/history_focus_test.js",
     "print_preview/print_preview_interactive_ui_tests.js",
     "settings/cr_settings_interactive_ui_tests.js",

chrome/test/data/webui/extensions/cr_extensions_interactive_ui_tests.js

+// Copyright 2019 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.
+
+/** @fileoverview Runs the Polymer Extensions interactive UI tests. */
+
+/** @const {string} Path to source root. */
+const ROOT_PATH = '../../../../../';
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_interactive_ui_test.js']);
+GEN('#include "chrome/browser/ui/webui/extensions/' +
+    'extension_settings_browsertest.h"');
+
+/**
+ * Test fixture for interactive Polymer Extensions elements.
+ * @constructor
+ * @extends {PolymerInteractiveUITest}
+ */
+const CrExtensionsInteractiveUITest = class extends PolymerInteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://extensions/';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return PolymerTest.getLibraries(ROOT_PATH).concat([
+      '../settings/test_util.js',
+    ]);
+  }
+};
+
+
+/** Test fixture for Sync Page. */
+CrExtensionsOptionsPageTest = class extends CrExtensionsInteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://extensions/?id=ibbpngabdmdpednkhonkkobdeccpkiff';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      'extension_options_dialog_test.js',
+    ]);
+  }
+
+  /** @override */
+  testGenPreamble() {
+    GEN('  InstallExtensionWithInPageOptions();');
+  }
+
+  /** @override */
+  get typedefCppFixture() {
+    return 'ExtensionSettingsUIBrowserTest';
+  }
+};
+
+TEST_F('CrExtensionsOptionsPageTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/extensions/extension_options_dialog_test.js

+// Copyright 2019 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.
+
+/**
+ * @fileoverview Suite of tests for extension options dialog.
+ * These are run as part of interactive_ui_tests.
+ */
+suite('ExtensionOptionsDialogTest', function() {
+  /** @type {extensions.Manager} */
+  let manager;
+
+  setup(function() {
+    manager = document.querySelector('extensions-manager');
+  });
+
+  function getOptionsDialog() {
+    const dialog = manager.$$('#options-dialog');
+    assertTrue(!!dialog);
+    return dialog;
+  }
+
+  test('show options dialog', function() {
+    const extensionDetailView = manager.$$('extensions-detail-view');
+    assertTrue(!!extensionDetailView);
+
+    const optionsButton = extensionDetailView.$$('#extensions-options');
+
+    // Click the options button.
+    optionsButton.click();
+
+    // Wait for dialog to open.
+    return test_util.eventToPromise('cr-dialog-open', manager)
+        .then(() => {
+          const dialog = getOptionsDialog();
+          let waitForClose = test_util.eventToPromise('close', dialog);
+          // Close dialog and wait.
+          dialog.$.dialog.cancel();
+          return waitForClose;
+        })
+        .then(() => {
+          // Validate that this button is focused after dialog closes.
+          assertEquals(optionsButton.$$('button'), getDeepActiveElement());
+        });
+  });
+});

testing/buildbot/filters/webui_polymer2_interactive_ui_tests.filter

@@ -43,6 +43,7 @@ CrElementsCheckboxTest.All
 CrElementsInputTest.All
 CrElementsProfileAvatarSelectorFocusTest.All
 CrElementsToggleTest.All
+CrExtensionsOptionsPageTest.All
 CrSettingsAnimatedPagesTest.All
 CrSettingsFocusRowBehavior.FocusTest
 CrSettingsSyncPageTest.All