CrToolbar: Only autofocus the search bar if autofocus is set

This CL modifies CrToolbar to allow users of CrToolbar to not set the
autofocus attribute to prevent CrToolbar's search bar from being
autofocused.

Bug: b:157737119
Change-Id: I449f5784e13323377a8b88261c02a9a6a8d90307
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2276340
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#784212}

chrome/browser/resources/bookmarks/toolbar.html

@@ -31,6 +31,7 @@
     clear-label="$i18n{clearSearch}"
     search-prompt="$i18n{searchPrompt}"
     narrow="{{narrow_}}"
+    autofocus
     on-search-changed="onSearchChanged_">
   <cr-icon-button iron-icon="cr:more-vert"
         id="menuButton"

chrome/browser/resources/chromeos/emulator/device_emulator_pages.html

@@ -50,6 +50,7 @@
 
     <cr-toolbar page-name="Device Emulator"
         clear-label="clear"
+        autofocus
         search-prompt="Search not working..."
         on-cr-toolbar-menu-tap="onMenuButtonClick_"
         menu-label="Device Emulator"

chrome/browser/resources/downloads/toolbar.html

@@ -20,7 +20,7 @@
     }
   }
 </style>
-<cr-toolbar id="toolbar" page-name="$i18n{title}"
+<cr-toolbar id="toolbar" page-name="$i18n{title}" autofocus
     search-prompt="$i18n{search}" clear-label="$i18n{clearSearch}"
     spinner-active="{{spinnerActive}}" on-search-changed="onSearchChanged_">
   <cr-icon-button id="moreActions" iron-icon="cr:more-vert"

chrome/browser/resources/extensions/toolbar.html

@@ -75,7 +75,7 @@
 </style>
 <cr-toolbar page-name="$i18n{toolbarTitle}" search-prompt="$i18n{search}"
     clear-label="$i18n{clearSearch}" menu-label="$i18n{mainMenu}" show-menu
-    narrow-threshold="1000">
+    autofocus narrow-threshold="1000">
   <div class="more-actions">
     <span id="devModeLabel">$i18n{toolbarDevMode}</span>
     <cr-tooltip-icon hidden="[[!shouldDisableDevMode_(

chrome/browser/resources/history/history_toolbar.html

@@ -33,6 +33,7 @@
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
         spinner-active="[[spinnerActive]]"
+        autofocus
         show-menu="[[hasDrawer]]"
         show-menu-promo="[[canShowMenuPromo_(showMenuPromo)]]"
         menu-label="$i18n{historyMenuButton}"

chrome/browser/resources/management/management_ui.html

@@ -159,7 +159,7 @@
       }
     </style>
 
-    <cr-toolbar page-name="$i18n{toolbarTitle}" role="banner"
+    <cr-toolbar page-name="$i18n{toolbarTitle}" role="banner" autofocus
         on-search-changed="onSearchChanged_" clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}">
     </cr-toolbar>

chrome/browser/resources/settings/settings_ui/settings_ui.html

@@ -84,6 +84,7 @@
     <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
     <cr-toolbar page-name="$i18n{settings}"
         clear-label="$i18n{clearSearch}"
+        autofocus
         search-prompt="$i18n{searchPrompt}"
         on-cr-toolbar-menu-tap="onMenuButtonTap_"
         spinner-active="[[toolbarSpinnerActive_]]"

chrome/test/data/webui/BUILD.gn

@@ -202,6 +202,7 @@ if (include_js_tests) {
       "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_manager_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toast_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_search_field_tests.m.js",
+      "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_tests.m.js",
       "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_view_manager_test.m.js",
       "$root_gen_dir/chrome/test/data/webui/fake_chrome_event.m.js",
       "$root_gen_dir/chrome/test/data/webui/find_shortcut_behavior_test.m.js",

chrome/test/data/webui/cr_elements/BUILD.gn

@@ -33,6 +33,7 @@ js_modulizer("modulize") {
     "cr_search_field_tests.js",
     "cr_slider_test.js",
     "cr_toolbar_search_field_tests.js",
+    "cr_toolbar_tests.js",
     "cr_tabs_test.js",
     "cr_toast_test.js",
     "cr_toast_manager_test.js",
@@ -86,6 +87,9 @@ js_type_check("closure_compile") {
     ":cr_toggle_test.m",
 
     #":cr_toolbar_search_field_tests",
+
+    ":cr_toolbar_tests.m",
+
     #":cr_view_manager_test",
     #":iron_list_focus_test",
     #":settings_private_test_constants",
@@ -456,3 +460,17 @@ js_library("cr_toggle_test.m") {
   externs_list = [ "$externs_path/mocha-2.5.js" ]
   extra_deps = [ ":modulize" ]
 }
+
+js_library("cr_toolbar_tests.m") {
+  sources = [
+    "$root_gen_dir/chrome/test/data/webui/cr_elements/cr_toolbar_tests.m.js",
+  ]
+  deps = [
+    "..:chai_assert",
+    "..:test_util.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar.m",
+  ]
+  externs_list = [ "$externs_path/mocha-2.5.js" ]
+  extra_deps = [ ":modulize" ]
+}

chrome/test/data/webui/cr_elements/cr_elements_browsertest.js

@@ -105,6 +105,29 @@ TEST_F('CrElementsToolbarSearchFieldTest', 'All', function() {
   mocha.run();
 });
 
+/**
+ * @constructor
+ * @extends {CrElementsBrowserTest}
+ */
+function CrElementsToolbarTest() {}
+
+CrElementsToolbarTest.prototype = {
+  __proto__: CrElementsBrowserTest.prototype,
+
+  /** @override */
+  browsePreload: 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html',
+
+  /** @override */
+  extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    '../test_util.js',
+    'cr_toolbar_tests.js',
+  ]),
+};
+
+TEST_F('CrElementsToolbarTest', 'All', function() {
+  mocha.run();
+});
+
 /**
  * @constructor
  * @extends {CrElementsBrowserTest}

chrome/test/data/webui/cr_elements/cr_elements_v3_browsertest.js

@@ -274,6 +274,18 @@ TEST_F('CrElementsToolbarSearchFieldV3Test', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var CrElementsToolbarV3Test = class extends CrElementsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://test?module=cr_elements/cr_toolbar_tests.m.js';
+  }
+};
+
+TEST_F('CrElementsToolbarV3Test', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var CrElementsToastManagerV3Test = class extends CrElementsV3BrowserTest {
   /** @override */

chrome/test/data/webui/cr_elements/cr_toolbar_tests.js

+// Copyright 2020 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 cr-toolbar. */
+
+// clang-format off
+// #import 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.m.js';
+//
+// #import {assertFalse, assertTrue} from '../chai_assert.js';
+// clang-format on
+
+suite('cr-toolbar', function() {
+  /** @type {?CrToolbarElement} */
+  let toolbar = null;
+
+  setup(function() {
+    document.body.innerHTML = '';
+    toolbar =
+        /** @type {!CrToolbarElement} */ (document.createElement('cr-toolbar'));
+    document.body.appendChild(toolbar);
+  });
+
+  test('autofocus propagated to search field', () => {
+    assertFalse(toolbar.autofocus);
+    assertFalse(toolbar.getSearchField().hasAttribute('autofocus'));
+
+    toolbar.autofocus = true;
+    assertTrue(toolbar.getSearchField().hasAttribute('autofocus'));
+  });
+});

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -180,7 +180,7 @@
           label="[[searchPrompt]]" clear-label="[[clearLabel]]"
           spinner-active="[[spinnerActive]]"
           showing-search="{{showingSearch_}}"
-          autofocus>
+          autofocus$="[[autofocus]]">
       </cr-toolbar-search-field>
       <iron-media-query query="(max-width: [[narrowThreshold]]px)"
           query-matches="{{narrow}}">

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

@@ -38,6 +38,13 @@ Polymer({
     // Controls whether the search field is shown.
     showSearch: {type: Boolean, value: true},
 
+    // Controls whether the search field is autofocused.
+    autofocus: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
     // True when the toolbar is displaying in narrow mode.
     narrow: {
       type: Boolean,