[CrOS Settings] Change search engine setting to a dialog

Update default search engine preference to be a dialog,
remove tooltip.

Screenshots:
Before:
https://screenshot.googleplex.com/8AwiZ9VfMSDVvHe.png

After:
https://screenshot.googleplex.com/3ZYYuwHJQ73kVmG.png
https://screenshot.googleplex.com/4wn9i9DbgbW22NG.png

Fixed: 1032121
Change-Id: I9c3e62ac7ee2ae94fdbe919cebad6b4c992a0277
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2489955
Commit-Queue: Gordon Seto <gordonseto@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820071}

chrome/app/os_settings_strings.grdp

@@ -658,8 +658,11 @@
   <message name="IDS_OS_SETTINGS_SEARCH_ENGINE_LABEL" desc="Label in OS settings describing search engine behavior.">
     Preferred search engine
   </message>
-  <message name="IDS_OS_SETTINGS_SEARCH_ENGINE_TOOLTIP" desc="Tooltip in OS settings explaining that search engine is used in both the Chrome browser and the Chrome OS app launcher.">
-    Used by Chrome browser and <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph> Launcher
+  <message name="IDS_OS_SETTINGS_SEARCH_ENGINE_BUTTON_LABEL" desc="Label in OS settings for the button to configure search engine behavior.">
+    Configure
+  </message>
+  <message name="IDS_OS_SETTINGS_SEARCH_ENGINE_DESCRIPTION" desc="Description in the search engine dialog in OS settings explaining that search engine is used in both the Chrome browser and the Chrome OS app launcher.">
+    Set your default search engine for Chrome browser and <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph> Launcher
   </message>
   <message name="IDS_SETTINGS_SEARCH_GOOGLE_ASSISTANT" desc="Label for the Google Assistant button.">
     Google Assistant

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_SEARCH_ENGINE_BUTTON_LABEL.png.sha1

+ecc13335f833edde75d88a1d928a01ec36632b0b
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_OS_SETTINGS_SEARCH_ENGINE_DESCRIPTION.png.sha1

+4961354eb9e465279f183cd24e75f405ec14bc1c
\ No newline at end of file

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -253,6 +253,7 @@ if (optimize_webui) {
       "chromeos/os_reset_page/os_reset_page.m.js",
       "chromeos/os_route.m.js",
       "chromeos/os_search_page/os_search_page.m.js",
+      "chromeos/os_search_page/os_search_selection_dialog.m.js",
       "chromeos/os_settings_icons_css.m.js",
       "chromeos/os_settings_page/main_page_behavior.m.js",
       "chromeos/os_settings_routes.m.js",
@@ -697,6 +698,8 @@ if (optimize_webui) {
       "chromeos/os_route.js",
       "chromeos/os_search_page/os_search_page.html",
       "chromeos/os_search_page/os_search_page.js",
+      "chromeos/os_search_page/os_search_selection_dialog.html",
+      "chromeos/os_search_page/os_search_selection_dialog.js",
       "chromeos/os_settings.html",
       "chromeos/os_settings_icons_css.html",
       "chromeos/os_settings_main/os_settings_main.html",

chrome/browser/resources/settings/chromeos/os_search_page/BUILD.gn

@@ -6,7 +6,10 @@ import("//chrome/browser/resources/settings/chromeos/os_settings.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
-  deps = [ ":os_search_page" ]
+  deps = [
+    ":os_search_page",
+    ":os_search_selection_dialog",
+  ]
 }
 
 js_library("os_search_page") {
@@ -19,13 +22,25 @@ js_library("os_search_page") {
     "../../settings_page:settings_animated_pages",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:i18n_behavior",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink",
+  ]
+}
+
+js_library("os_search_selection_dialog") {
+  deps = [
+    "../../search_engines_page:search_engines_browser_proxy",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
-   ":os_search_page.m"
+    ":os_search_page.m",
+    ":os_search_selection_dialog.m",
   ]
 }
 
@@ -40,8 +55,6 @@ js_library("os_search_page.m") {
     "//chrome/browser/resources/settings/search_engines_page:search_engines_browser_proxy.m",
     "//chrome/browser/resources/settings/settings_page:settings_animated_pages.m",
     "//chrome/browser/resources/settings/settings_page:settings_subpage.m",
-    "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
-    "//third_party/polymer/v3_0/components-chromium/paper-tooltip:paper-tooltip",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_link_row:cr_link_row.m",
     "//ui/webui/resources/cr_elements/policy:cr_policy_pref_indicator.m",
@@ -49,14 +62,31 @@ js_library("os_search_page.m") {
     "//ui/webui/resources/js:cr.m",
     "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
   ]
   extra_deps = [ ":os_search_page_module" ]
 }
 
+js_library("os_search_selection_dialog.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_search_page/os_search_selection_dialog.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  extra_deps = [ ":os_search_selection_dialog_module" ]
+}
+
 import("//tools/polymer/polymer.gni")
 
 group("polymer3_elements") {
-  public_deps = [ ":os_search_page_module" ]
+  public_deps = [
+    ":os_search_page_module",
+    ":os_search_selection_dialog_module",
+  ]
 }
 
 polymer_modulizer("os_search_page") {
@@ -66,3 +96,11 @@ polymer_modulizer("os_search_page") {
   auto_imports = os_settings_auto_imports
   namespace_rewrites = os_settings_namespace_rewrites
 }
+
+polymer_modulizer("os_search_selection_dialog") {
+  js_file = "os_search_selection_dialog.js"
+  html_file = "os_search_selection_dialog.html"
+  html_type = "dom-module"
+  auto_imports = os_settings_auto_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+}

chrome/browser/resources/settings/chromeos/os_search_page/os_search_page.html

@@ -2,16 +2,15 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-tooltip/paper-tooltip.html">
+<link rel="import" href="os_search_selection_dialog.html">
 <link rel="import" href="../../controls/extension_controlled_indicator.html">
 <link rel="import" href="../../router.html">
 <link rel="import" href="../../search_engines_page/search_engines_browser_proxy.html">
@@ -32,16 +31,6 @@
         min-height: var(--settings-row-min-height);
       }
 
-      paper-tooltip {
-        --paper-tooltip-padding: 12px 10px;
-      }
-
-      iron-icon {
-        --iron-icon-fill-color: var(--cros-search-page-question-icon-color);
-        height: 16px;
-        width: 16px;
-      }
-
       cr-policy-pref-indicator {
         padding-inline-end: 8px;
       }
@@ -52,16 +41,13 @@
         <!-- Omnibox and launcher search engine. This shares the same pref with
              browser search engine because users probably don't want one engine
              in the omnibox and a different one in the launcher. -->
-        <div class="settings-box first block">
+        <div class="settings-box two-line first block">
           <div id="search-wrapper">
-            <div id="searchExplanation" class="start settings-box-text"
-                aria-hidden="true">
-              $i18n{osSearchEngineLabel}
-              <iron-icon id="help-icon" icon="cr:help-outline"></iron-icon>
-              <paper-tooltip id="tooltip" for="help-icon" position="bottom"
-                  fit-to-visible-bounds>
-                $i18n{osSearchEngineTooltip}
-              </paper-tooltip>
+            <div class="start settings-box-text" aria-hidden="true">
+              <div id="searchExplanation">$i18n{osSearchEngineLabel}</div>
+              <div class="secondary" id="currentSearchEngine">
+                [[currentSearchEngine_.name]]
+              </div>
             </div>
             <template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
                 prefs.default_search_provider_data.template_url_data)]]">
@@ -69,16 +55,16 @@
                   prefs.default_search_provider_data.template_url_data]]">
               </cr-policy-pref-indicator>
             </template>
-            <select class="md-select" on-change="onChange_"
-                aria-label="$i18n{osSearchEngineLabel}
-                    $i18n{osSearchEngineTooltip}"
+            <div class="separator"></div>
+            <cr-button id="searchSelectionDialogButton"
+                aria-labelledby="searchExplanation"
+                aria-describedby="currentSearchEngine"
                 disabled$="[[isDefaultSearchEngineEnforced_(
                     prefs.default_search_provider_data.template_url_data)]]"
+                on-click="onShowSearchSelectionDialogClick_"
                 deep-link-focus-id$="[[Setting.kPreferredSearchEngine]]">
-              <template is="dom-repeat" items="[[searchEngines_]]">
-                <option selected="[[item.default]]">[[item.name]]</option>
-              </template>
-            </select>
+              $i18n{osSearchEngineButtonLabel}
+            </cr-button>
           </div>
           <template is="dom-if"
               if="[[prefs.default_search_provider_data.template_url_data.extensionId]]">
@@ -118,6 +104,13 @@
         </template>
       </template>
     </settings-animated-pages>
+
+    <!-- Default Search Engine Selection Dialog -->
+    <template is="dom-if" if="[[showSearchSelectionDialog_]]" restamp>
+      <os-settings-search-selection-dialog
+          on-close="onSearchSelectionDialogClose_">
+      </os-settings-search-selection-dialog>
+    </template>
   </template>
   <script src="os_search_page.js"></script>
 </dom-module>

chrome/browser/resources/settings/chromeos/os_search_page/os_search_page.js

@@ -18,19 +18,11 @@ Polymer({
   properties: {
     prefs: Object,
 
-    /**
-     * List of default search engines available.
-     * @private {!Array<!SearchEngine>}
-     */
-    searchEngines_: {
-      type: Array,
-      value() {
-        return [];
-      }
-    },
+    /** @private {!SearchEngine} The current selected search engine. */
+    currentSearchEngine_: Object,
 
-    /** @private Filter applied to search engines. */
-    searchEnginesFilter_: String,
+    /** @private */
+    showSearchSelectionDialog_: Boolean,
 
     /** @type {?Map<string, string>} */
     focusConfig_: Object,
@@ -64,11 +56,12 @@ Polymer({
 
   /** @override */
   ready() {
-    const updateSearchEngines = searchEngines => {
-      this.set('searchEngines_', searchEngines.defaults);
+    const updateCurrentSearchEngine = searchEngines => {
+      this.currentSearchEngine_ =
+          searchEngines.defaults.find(searchEngine => searchEngine.default);
     };
-    this.browserProxy_.getSearchEnginesList().then(updateSearchEngines);
-    cr.addWebUIListener('search-engines-changed', updateSearchEngines);
+    this.browserProxy_.getSearchEnginesList().then(updateCurrentSearchEngine);
+    cr.addWebUIListener('search-engines-changed', updateCurrentSearchEngine);
 
     this.focusConfig_ = new Map();
     if (settings.routes.GOOGLE_ASSISTANT) {
@@ -91,15 +84,19 @@ Polymer({
   },
 
   /** @private */
-  onChange_() {
-    const select = /** @type {!HTMLSelectElement} */ (this.$$('select'));
-    const searchEngine = this.searchEngines_[select.selectedIndex];
-    this.browserProxy_.setDefaultSearchEngine(searchEngine.modelIndex);
+  onDisableExtension_() {
+    this.fire('refresh-pref', 'default_search_provider.enabled');
   },
 
   /** @private */
-  onDisableExtension_() {
-    this.fire('refresh-pref', 'default_search_provider.enabled');
+  onShowSearchSelectionDialogClick_() {
+    this.showSearchSelectionDialog_ = true;
+  },
+
+  /** @private */
+  onSearchSelectionDialogClose_() {
+    this.showSearchSelectionDialog_ = false;
+    cr.ui.focusWithoutInk(assert(this.$.searchSelectionDialogButton));
   },
 
   /** @private */

chrome/browser/resources/settings/chromeos/os_search_page/os_search_selection_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">>
+<link rel="import" href="../../search_engines_page/search_engines_browser_proxy.html">
+<link rel="import" href="../../settings_shared_css.html">
+
+<dom-module id="os-settings-search-selection-dialog">
+  <template>
+    <style include="settings-shared shared-style md-select">
+      :host {
+          --cr-dialog-width: 320px;
+          --md-select-width: 280px;
+      }
+
+      #dialogBody {
+        display: flex;
+        flex-direction: column;
+        height: 95px;
+        overflow: auto;
+      }
+
+      .md-select {
+          margin-top: 20px;
+      }
+    </style>
+    <cr-dialog id="dialog" show-on-attach>
+      <div id="title" slot="title">$i18n{osSearchEngineLabel}</div>
+      <div id="dialogBody" slot="body">
+        <div id="description">$i18n{osSearchEngineDescription}</div>
+        <select class="md-select"
+            aria-labelledby="title"
+            aria-describedby="description"
+            autofocus>
+          <template is="dom-repeat" items="[[searchEngines_]]">
+            <option selected="[[item.default]]">[[item.name]]</option>
+          </template>
+        </select>
+      </div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="onCancelButtonClick_">
+          $i18n{cancel}
+        </cr-button>
+        <cr-button class="action-button" on-click="onActionButtonClick_"
+            disabled="[[disableActionButton_]]">
+          $i18n{done}
+        </cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="os_search_selection_dialog.js"></script>
+</dom-module>
\ No newline at end of file

chrome/browser/resources/settings/chromeos/os_search_page/os_search_selection_dialog.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 'os-settings-search-selection-dialog' is a dialog for setting
+ * the preferred search engine.
+ */
+Polymer({
+  is: 'os-settings-search-selection-dialog',
+
+  behaviors: [],
+
+  properties: {
+    /**
+     * List of default search engines available.
+     * @private {!Array<!SearchEngine>}
+     */
+    searchEngines_: {
+      type: Array,
+      value() {
+        return [];
+      }
+    },
+  },
+
+  /** @private {?settings.SearchEnginesBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  created() {
+    this.browserProxy_ = settings.SearchEnginesBrowserProxyImpl.getInstance();
+  },
+
+  /** @override */
+  ready() {
+    const updateSearchEngines = searchEngines => {
+      this.set('searchEngines_', searchEngines.defaults);
+    };
+    this.browserProxy_.getSearchEnginesList().then(updateSearchEngines);
+    cr.addWebUIListener('search-engines-changed', updateSearchEngines);
+  },
+
+  /**
+   * Enables the checked languages.
+   * @private
+   */
+  onActionButtonClick_() {
+    const select = /** @type {!HTMLSelectElement} */ (this.$$('select'));
+    const searchEngine = this.searchEngines_[select.selectedIndex];
+    this.browserProxy_.setDefaultSearchEngine(searchEngine.modelIndex);
+
+    this.$.dialog.close();
+  },
+
+  /** @private */
+  onCancelButtonClick_() {
+    this.$.dialog.close();
+  },
+
+  /**
+   * @param {!KeyboardEvent} e
+   * @private
+   */
+  onKeydown_(e) {
+    if (e.key == 'Escape') {
+      this.onCancelButtonClick_();
+    }
+  },
+});

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -562,6 +562,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_SEARCH_SELECTION_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_search_page/os_search_selection_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_OS_SETTINGS_PAGE_MAIN_PAGE_BEHAVIOR_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_settings_page/main_page_behavior.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -1069,6 +1069,12 @@
       <structure name="IDR_OS_SETTINGS_SEARCH_PAGE_HTML"
                  file="chromeos/os_search_page/os_search_page.html"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_SEARCH_SELECTION_DIALOG_JS"
+                 file="chromeos/os_search_page/os_search_selection_dialog.js"
+                 compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_SEARCH_SELECTION_DIALOG_HTML"
+                 file="chromeos/os_search_page/os_search_selection_dialog.html"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_SYNC_CONTROLS_JS"
                  file="people_page/sync_controls.js"
                  compress="false" type="chrome_html"

chrome/browser/ui/webui/settings/chromeos/search_section.cc

@@ -212,6 +212,7 @@ SearchSection::~SearchSection() {
 void SearchSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"osSearchEngineLabel", IDS_OS_SETTINGS_SEARCH_ENGINE_LABEL},
+      {"osSearchEngineButtonLabel", IDS_OS_SETTINGS_SEARCH_ENGINE_BUTTON_LABEL},
       {"searchGoogleAssistant", IDS_SETTINGS_SEARCH_GOOGLE_ASSISTANT},
       {"searchGoogleAssistantEnabled",
        IDS_SETTINGS_SEARCH_GOOGLE_ASSISTANT_ENABLED},
@@ -229,9 +230,9 @@ void SearchSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
                                   is_assistant_allowed
                                       ? IDS_SETTINGS_SEARCH_AND_ASSISTANT
                                       : IDS_SETTINGS_SEARCH);
-  html_source->AddString(
-      "osSearchEngineTooltip",
-      ui::SubstituteChromeOSDeviceType(IDS_OS_SETTINGS_SEARCH_ENGINE_TOOLTIP));
+  html_source->AddString("osSearchEngineDescription",
+                         ui::SubstituteChromeOSDeviceType(
+                             IDS_OS_SETTINGS_SEARCH_ENGINE_DESCRIPTION));
 
   AddGoogleAssistantStrings(html_source);
 }

chrome/test/data/webui/settings/chromeos/os_search_page_test.js

@@ -24,6 +24,8 @@ suite('OSSearchPageTests', function() {
 
   let browserProxy = null;
 
+  let searchEngineInfo = null;
+
   /**
    * A test version of SearchEnginesBrowserProxy. Provides helper methods
    * for allowing tests to know when a method was called, as well as
@@ -94,19 +96,19 @@ suite('OSSearchPageTests', function() {
   }
 
   function createSampleSearchEngine(
-      canBeDefault, canBeEdited, canBeRemoved) {
+      canBeDefault, canBeEdited, canBeRemoved, name, modelIndex) {
     return {
       canBeDefault: canBeDefault,
       canBeEdited: canBeEdited,
       canBeRemoved: canBeRemoved,
       default: false,
-      displayName: 'Google',
+      displayName: name,
       iconURL: 'http://www.google.com/favicon.ico',
       id: 0,
       isOmniboxExtension: false,
       keyword: 'google.com',
-      modelIndex: 0,
-      name: 'Google',
+      modelIndex: modelIndex,
+      name: name,
       url: 'https://search.foo.com/search?p=%s',
       urlLocked: false,
     };
@@ -114,13 +116,13 @@ suite('OSSearchPageTests', function() {
 
   function generateSearchEngineInfo() {
     const searchEngines0 =
-        createSampleSearchEngine(true, false, false);
+        createSampleSearchEngine(true, false, false, 'SearchEngine0', 0);
     searchEngines0.default = true;
     const searchEngines1 =
-        createSampleSearchEngine(true, false, false);
+        createSampleSearchEngine(true, false, false, 'SearchEngine1', 1);
     searchEngines1.default = false;
     const searchEngines2 =
-        createSampleSearchEngine(true, false, false);
+        createSampleSearchEngine(true, false, false, 'SearchEngine2', 2);
     searchEngines2.default = false;
 
     return {
@@ -132,7 +134,8 @@ suite('OSSearchPageTests', function() {
 
   setup(function() {
     browserProxy = new TestSearchEnginesBrowserProxy();
-    browserProxy.setSearchEnginesInfo(generateSearchEngineInfo());
+    searchEngineInfo = generateSearchEngineInfo();
+    browserProxy.setSearchEnginesInfo(searchEngineInfo);
     settings.SearchEnginesBrowserProxyImpl.instance_ = browserProxy;
     PolymerTest.clearBody();
     page = document.createElement('os-settings-search-page');
@@ -152,30 +155,66 @@ suite('OSSearchPageTests', function() {
   // Tests that the page is querying and displaying search engine info on
   // startup.
   test('Initialization', async () => {
-    const selectElement = page.$$('select');
-    assertTrue(!!selectElement);
-    assertTrue(!!page.$$('#help-icon'));
+    // Dialog should initially be hidden.
+    assertFalse(!!page.$$('os-settings-search-selection-dialog'));
+
+    await browserProxy.whenCalled('getSearchEnginesList');
+    Polymer.dom.flush();
+
+    // Sublabel should initially display the first search engine's name.
+    const searchEngineSubLabel = page.$$('#currentSearchEngine');
+    assertTrue(!!searchEngineSubLabel);
+    assertEquals(
+        searchEngineInfo.defaults[0].name,
+        searchEngineSubLabel.innerHTML.trim());
+
+    // Click the dialog button.
+    const dialogButton = page.$$('#searchSelectionDialogButton');
+    assertTrue(!!dialogButton);
+    dialogButton.click();
+    Polymer.dom.flush();
 
     await browserProxy.whenCalled('getSearchEnginesList');
     Polymer.dom.flush();
+
+    // Dialog should now be showing.
+    const dialog = page.$$('os-settings-search-selection-dialog');
+    assertTrue(!!dialog);
+    const selectElement = dialog.$$('select');
+    assertTrue(!!selectElement);
     assertEquals(0, selectElement.selectedIndex);
 
     // Simulate a user initiated change of the default search engine.
     selectElement.selectedIndex = 1;
-    selectElement.dispatchEvent(new CustomEvent('change'));
-    await browserProxy.whenCalled('setDefaultSearchEngine');
     assertEquals(1, selectElement.selectedIndex);
+    const doneButton = dialog.$$('.action-button');
+    assertTrue(!!doneButton);
+    doneButton.click();
+
+    // Simulate the change
+    searchEngineInfo.defaults[0].default = false;
+    searchEngineInfo.defaults[1].default = true;
+    searchEngineInfo.defaults[2].default = false;
+    await browserProxy.whenCalled('setDefaultSearchEngine');
+    cr.webUIListenerCallback('search-engines-changed', searchEngineInfo);
+    Polymer.dom.flush();
+
+    // The sublabel should now be updated to the new search engine.
+    assertEquals(
+        searchEngineInfo.defaults[1].name,
+        searchEngineSubLabel.innerHTML.trim());
 
     // Simulate a change that happened in browser settings.
-    const searchEnginesInfo = generateSearchEngineInfo();
-    searchEnginesInfo.defaults[0].default = false;
-    searchEnginesInfo.defaults[1].default = false;
-    searchEnginesInfo.defaults[2].default = true;
+    searchEngineInfo.defaults[0].default = false;
+    searchEngineInfo.defaults[1].default = false;
+    searchEngineInfo.defaults[2].default = true;
 
     browserProxy.resetResolver('setDefaultSearchEngine');
-    cr.webUIListenerCallback('search-engines-changed', searchEnginesInfo);
+    cr.webUIListenerCallback('search-engines-changed', searchEngineInfo);
     Polymer.dom.flush();
-    assertEquals(2, selectElement.selectedIndex);
+    assertEquals(
+        searchEngineInfo.defaults[2].name,
+        searchEngineSubLabel.innerHTML.trim());
 
     browserProxy.whenCalled('setDefaultSearchEngine').then(function() {
       // Since the change happened in a different tab, there should be
@@ -186,8 +225,8 @@ suite('OSSearchPageTests', function() {
 
   test('ControlledByExtension', async () => {
     await browserProxy.whenCalled('getSearchEnginesList');
-    const selectElement = page.$$('select');
-    assertFalse(selectElement.disabled);
+    const dialogButton = page.$$('#searchSelectionDialogButton');
+    assertFalse(dialogButton.disabled);
     assertFalse(!!page.$$('extension-controlled-indicator'));
 
     page.set('prefs.default_search_provider_data.template_url_data', {
@@ -200,15 +239,15 @@ suite('OSSearchPageTests', function() {
     });
     Polymer.dom.flush();
 
-    assertTrue(selectElement.disabled);
+    assertTrue(dialogButton.disabled);
     assertTrue(!!page.$$('extension-controlled-indicator'));
     assertFalse(!!page.$$('cr-policy-pref-indicator'));
   });
 
   test('ControlledByPolicy', async () => {
     await browserProxy.whenCalled('getSearchEnginesList');
-    const selectElement = page.$$('select');
-    assertFalse(selectElement.disabled);
+    const dialogButton = page.$$('#searchSelectionDialogButton');
+    assertFalse(dialogButton.disabled);
     assertFalse(!!page.$$('extension-controlled-indicator'));
 
     page.set('prefs.default_search_provider_data.template_url_data', {
@@ -218,7 +257,7 @@ suite('OSSearchPageTests', function() {
     });
     Polymer.dom.flush();
 
-    assertTrue(selectElement.disabled);
+    assertTrue(dialogButton.disabled);
     assertFalse(!!page.$$('extension-controlled-indicator'));
     assertTrue(!!page.$$('cr-policy-pref-indicator'));
   });
@@ -232,7 +271,7 @@ suite('OSSearchPageTests', function() {
     settings.Router.getInstance().navigateTo(
         settings.routes.OS_SEARCH, params);
 
-    const deepLinkElement = page.$$('select');
+    const deepLinkElement = page.$$('#searchSelectionDialogButton');
     await test_util.waitAfterNextRender(deepLinkElement);
     assertEquals(
         deepLinkElement, getDeepActiveElement(),