Clicking "manage search engines" on the search settings page now opens the new subpage. It also provides a mechanism for adding a new search engine.

BUG=479359

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

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

14 files changed, 380 insertions, 5 deletions

diff --git a/chrome/app/settings_strings.grdp b/chrome/app/settings_strings.grdp
index 1376ca8..6db525a 100644
--- a/chrome/app/settings_strings.grdp
+++ b/chrome/app/settings_strings.grdp
@@ -110,4 +110,30 @@
     Say "Ok Google" in a new tab and google.com
   </message>
 
+  <!-- Search Engines Page -->
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_PAGE_TITLE" desc="Name of the settings page which manages search engines.">
+    Search Engines
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_ADD_SEARCH_ENGINE_LABEL" desc="Label for section for adding a new search engine.">
+    Add a search engine
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_LABEL" desc="Label for regular Search Engines section">
+    Search engines
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_OTHER_ENGINES_LABEL" desc="Label for 'other' Search Engines section">
+    Other search engines
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_DOMAIN_LABEL" desc="Label for Domain column header for a search engine">
+    Domain
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_KEYWORD_LABEL" desc="Label for Keyword column header for a search engine">
+    Keyword
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_QUERY_URL_LABEL" desc="Label for Query URL column header for a search engine">
+    Query URL
+  </message>
+  <message name="IDS_SETTINGS_SEARCH_ENGINES_ADD_BUTTON_LABEL" desc="Label for Add button for adding a new search engine">
+    Add
+  </message>
+
 </grit-part>
diff --git a/chrome/browser/resources/settings/routes.html b/chrome/browser/resources/settings/routes.html
index 56f65e9..80a3d4b 100644
--- a/chrome/browser/resources/settings/routes.html
+++ b/chrome/browser/resources/settings/routes.html
@@ -10,4 +10,6 @@
 <more-route name="dateTime" path="/dateTime"></more-route>
 <more-route name="downloads" path="/downloads"></more-route>
 <more-route name="internet" path="/internet"></more-route>
-<more-route name="search" path="/search"></more-route>
+<more-route name="search" path="/search">
+  <more-route name="search-engines" path="/engines"></more-route>
+</more-route>
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engine_adder.html b/chrome/browser/resources/settings/search_engines_page/search_engine_adder.html
new file mode 100644
index 0000000..e93112b
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engine_adder.html
@@ -0,0 +1,45 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+<link rel="import" href="search_engine_adder_style.html">
+
+<polymer-element name="cr-search-engine-adder">
+  <template>
+    <core-style ref="searchEngineAdderStyle"></core-style>
+
+    <div class="add-label" layout horizontal center justified>
+      <span i18n-content="searchEnginesAddSearchEngineLabel"></span>
+      <cr-expand-button expanded="{{opened}}"></cr-expand-button>
+    </div>
+    <cr-collapse opened="{{opened}}">
+      <div class="container" layout horizontal>
+        <div class="input-field" flex two>
+          <div class="input-label" i18n-content="searchEnginesDomainLabel">
+          </div>
+          <cr-input id="domainField" autoValidate="false" required>
+          </cr-input>
+        </div>
+        <div class="input-field" flex two>
+          <div class="input-label" i18n-content="searchEnginesKeywordLabel">
+          </div>
+          <cr-input id="keywordField" autoValidate="false" required>
+          </cr-input>
+        </div>
+        <div class="input-field" flex four>
+          <div class="input-label" i18n-content="searchEnginesQueryURLLabel">
+          </div>
+          <cr-input id="queryURLField" autoValidate="false" required>
+          </cr-input>
+        </div>
+        <div layout horizontal center>
+          <cr-button i18n-content="searchEnginesAddButtonLabel"
+              on-click="{{add_}}"raised>
+          </cr-button>
+        </div>
+      </div>
+    </cr-collapse>
+  </template>
+  <script src="search_engine_adder.js"></script>
+</polymer-element>
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engine_adder.js b/chrome/browser/resources/settings/search_engines_page/search_engine_adder.js
new file mode 100644
index 0000000..1ec5522
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engine_adder.js
@@ -0,0 +1,27 @@
+// Copyright 2015 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 'cr-search-engine-adder' is a component for adding a new search
+ * engine.
+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-search-engine-adder
+ */
+Polymer('cr-search-engine-adder', {
+  /** @private */
+  add_: function() {
+    if (!this.$.domainField.isInvalid &&
+        !this.$.keywordField.isInvalid &&
+        !this.$.queryURLField.isInvalid) {
+      chrome.searchEnginesPrivate.addOtherSearchEngine(
+          /* name */ this.$.domainField.value,
+          /* keyword */ this.$.keywordField.value,
+          /* url */ this.$.queryURLField.value);
+      this.$.domainField.value = '';
+      this.$.keywordField.value = '';
+      this.$.queryURLField.value = '';
+    }
+  },
+});
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engine_adder_style.html b/chrome/browser/resources/settings/search_engines_page/search_engine_adder_style.html
new file mode 100644
index 0000000..d2ae03e
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engine_adder_style.html
@@ -0,0 +1,21 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+
+<core-style id="searchEngineAdderStyle">
+.input-label {
+  font-size: 0.75em;
+}
+
+.container {
+  margin-top: 14px;
+  width: 660px;
+}
+
+.add-label {
+  width: 660px;
+}
+
+.input-field {
+  -webkit-margin-end: 20px;
+}
+</core-style>
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engines_page.html b/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
new file mode 100644
index 0000000..4338ee9
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engines_page.html
@@ -0,0 +1,20 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
+<link rel="import" href="search_engine_adder.html">
+<link rel="import" href="search_engines_page_style.html">
+
+<polymer-element name="cr-settings-search-engines-page">
+  <template>
+    <link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
+    <core-style ref="searchEnginesPageStyle"></core-style>
+
+    <paper-shadow layout vertical cross-fade>
+      <div class="content">
+        <cr-search-engine-adder></cr-search-engine-adder>
+      </div>
+    </paper-shadow>
+  </template>
+  <script src="search_engines_page.js"></script>
+</polymer-element>
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engines_page.js b/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
new file mode 100644
index 0000000..176468f
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engines_page.js
@@ -0,0 +1,150 @@
+// Copyright 2015 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 'cr-settings-search-engines-page' is the settings page
+ * containing search engines settings.
+ *
+ * Example:
+ *
+ *    <core-animated-pages>
+ *      <cr-settings-search-engines-page prefs="{{prefs}}">
+ *      </cr-settings-search-engines-page>
+ *      ... other pages ...
+ *    </core-animated-pages>
+ *
+ * @group Chrome Settings Elements
+ * @element cr-settings-search-engines-page
+ */
+Polymer('cr-settings-search-engines-page', {
+  publish: {
+    /**
+     * Preferences state.
+     *
+     * @attribute prefs
+     * @type {CrSettingsPrefsElement}
+     * @default null
+     */
+    prefs: null,
+
+    /**
+     * Route for the page.
+     *
+     * @attribute route
+     * @type {string}
+     * @default ''
+     */
+    route: '',
+
+    /**
+     * Whether the page is a subpage.
+     *
+     * @attribute subpage
+     * @type {boolean}
+     * @default true
+     */
+    subpage: true,
+
+    /**
+     * ID of the page.
+     *
+     * @attribute PAGE_ID
+     * @const {string}
+     * @default 'search'
+     */
+    PAGE_ID: 'search_engines',
+
+    /**
+     * Title for the page header and navigation menu.
+     *
+     * @attribute pageTitle
+     * @type {string}
+     */
+    pageTitle: loadTimeData.getString('searchEnginesPageTitle'),
+
+    /**
+     * Name of the 'core-icon' to be shown in the settings-page-header.
+     *
+     * @attribute icon
+     * @type {string}
+     * @default 'search'
+     */
+    icon: 'search',
+
+    /**
+     * List of default search engines available.
+     *
+     * @attribute defaultSearchEngines
+     * @type {Array<!SearchEngine>}
+     * @default null
+     */
+    defaultSearchEngines: null,
+
+    /**
+     * List of other search engines available.
+     *
+     * @attribute otherSearchEngines
+     * @type {Array<!SearchEngine>}
+     * @default null
+     */
+    otherSearchEngines: null,
+
+    /**
+     * GUID of the currently selected default search engine.
+     *
+     * @attribute defaultEngineGuid
+     * @type {string}
+     * @default ''
+     */
+    defaultEngineGuid: '',
+  },
+
+  /** @override */
+  created: function() {
+    this.searchEngines = [];
+  },
+
+  /** @override */
+  domReady: function() {
+    chrome.searchEnginesPrivate.onSearchEnginesChanged.addListener(
+        this.updateSearchEngines_.bind(this));
+    chrome.searchEnginesPrivate.getSearchEngines(
+        this.updateSearchEngines_.bind(this));
+  },
+
+  /**
+   * Persists the new default search engine back to Chrome. Called when the
+   * user selects a new default in the search engines dropdown.
+   */
+  defaultEngineGuidChanged: function() {
+    chrome.searchEnginesPrivate.setSelectedSearchEngine(this.defaultEngineGuid);
+  },
+
+
+  /**
+   * Updates the lists of search engines based on the given |engines|.
+   * @param {!Array<!SearchEngine>} engines All the search engines.
+   * @private
+   */
+  updateSearchEngines_: function(engines) {
+    var defaultEngines = [];
+    var otherEngines = [];
+
+    engines.forEach(function(engine) {
+      if (engine.type ==
+          chrome.searchEnginesPrivate.SearchEngineType.DEFAULT) {
+        defaultEngines.push(engine);
+        if (engine.isSelected) {
+          this.defaultEngineGuid = engine.guid;
+        }
+      } else if (engine.type ==
+                 chrome.searchEnginesPrivate.SearchEngineType.OTHER) {
+        otherEngines.push(engine);
+      }
+    }, this);
+
+    this.defaultSearchEngines = defaultEngines;
+    this.otherSearchEngines = otherEngines;
+  }
+});
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engines_page_style.html b/chrome/browser/resources/settings/search_engines_page/search_engines_page_style.html
new file mode 100644
index 0000000..b4ad9e6
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engines_page_style.html
@@ -0,0 +1,16 @@
+<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+
+<core-style id="searchEnginesPageStyle">
+.manage-search-engines {
+  -webkit-margin-start: 10px;
+}
+
+.search-engines {
+  margin-top: 20px;
+}
+
+.search-engines-dropdown {
+  min-width: 150px;
+}
+</core-style>
diff --git a/chrome/browser/resources/settings/search_page/search_page.html b/chrome/browser/resources/settings/search_page/search_page.html
index f14ff36..0774f30 100644
--- a/chrome/browser/resources/settings/search_page/search_page.html
+++ b/chrome/browser/resources/settings/search_page/search_page.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
+<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
 <link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
 <link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
@@ -24,7 +25,8 @@
         </cr-dropdown-menu>
 
         <cr-button class="manage-search-engines"
-            i18n-content="searchManageButtonLabel" raised>
+            i18n-content="searchManageButtonLabel"
+            on-click="{{manageSearchEngines_}}" raised>
         </cr-button>
       </div>
     </paper-shadow>
diff --git a/chrome/browser/resources/settings/search_page/search_page.js b/chrome/browser/resources/settings/search_page/search_page.js
index 00c03cd..00c54dd9 100644
--- a/chrome/browser/resources/settings/search_page/search_page.js
+++ b/chrome/browser/resources/settings/search_page/search_page.js
@@ -28,6 +28,15 @@ Polymer('cr-settings-search-page', {
     prefs: null,
 
     /**
+     * Route for the page.
+     *
+     * @attribute route
+     * @type {string}
+     * @default ''
+     */
+    route: '',
+
+    /**
      * Whether the page is a subpage.
      *
      * @attribute subpage
@@ -66,7 +75,7 @@ Polymer('cr-settings-search-page', {
      * List of default search engines available.
      *
      * @attribute searchEngines
-     * @type {Array<!SearchEngine}
+     * @type {Array<!SearchEngine>}
      * @default null
      */
     searchEngines: null,
@@ -122,5 +131,10 @@ Polymer('cr-settings-search-page', {
     }, this);
 
     this.searchEngines = defaultEngines;
-  }
+  },
+
+  /** @private */
+  manageSearchEngines_: function() {
+    MoreRouting.navigateTo('search-engines');
+  },
 });
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.html b/chrome/browser/resources/settings/settings_main/settings_main.html
index 17bbe19..6f52e70 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.html
+++ b/chrome/browser/resources/settings/settings_main/settings_main.html
@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://md-settings/date_time_page/date_time_page.html">
 <link rel="import" href="chrome://md-settings/downloads_page/downloads_page.html">
 <link rel="import" href="chrome://md-settings/internet_page/internet_page.html">
+<link rel="import" href="chrome://md-settings/search_engines_page/search_engines_page.html">
 <link rel="import" href="chrome://md-settings/search_page/search_page.html">
 <link rel="import" href="chrome://md-settings/routes.html">
 <link rel="import" href="settings_main_style.html">
@@ -33,6 +34,9 @@
           </cr-settings-downloads-page>
           <cr-settings-search-page prefs="{{prefs}}" route="search">
           </cr-settings-search-page>
+          <cr-settings-search-engines-page prefs="{{prefs}}"
+              route="search-engines">
+          </cr-settings-search-engines-page>
         </core-animated-pages>
       </more-route-selector>
     </div>
diff --git a/chrome/browser/resources/settings/settings_resources.grd b/chrome/browser/resources/settings/settings_resources.grd
index daaca07..eb2d3f0 100644
--- a/chrome/browser/resources/settings/settings_resources.grd
+++ b/chrome/browser/resources/settings/settings_resources.grd
@@ -205,6 +205,28 @@
       <structure name="IDR_SETTINGS_ROUTING_MORE_ROUTING_ROUTING_EXTRACTED_JS"
                  file="routing/more_routing/routing_extracted.js"
                  type="chrome_html" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINE_ADDER_JS"
+                 file="search_engines_page/search_engine_adder.js"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINE_ADDER_HTML"
+                 file="search_engines_page/search_engine_adder.html"
+                 type="chrome_html"
+                 flattenhtml="true"
+                 allowexternalscript="true" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINE_ADDER_STYLE_HTML"
+                 file="search_engines_page/search_engine_adder_style.html"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINES_PAGE_JS"
+                 file="search_engines_page/search_engines_page.js"
+                 type="chrome_html" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINES_PAGE_HTML"
+                 file="search_engines_page/search_engines_page.html"
+                 type="chrome_html"
+                 flattenhtml="true"
+                 allowexternalscript="true" />
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINES_PAGE_STYLE_HTML"
+                 file="search_engines_page/search_engines_page_style.html"
+                 type="chrome_html" />
       <structure name="IDR_SETTINGS_SEARCH_PAGE_JS"
                  file="search_page/search_page.js"
                  type="chrome_html" />
diff --git a/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc b/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
index 77fbb47..a8443473 100644
--- a/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
+++ b/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
@@ -121,6 +121,27 @@ void AddSearchStrings(content::WebUIDataSource* html_source) {
       IDS_SETTINGS_SEARCH_OK_GOOGLE_DESCRIPTION_LABEL);
 }
 
+void AddSearchEnginesStrings(content::WebUIDataSource* html_source) {
+  html_source->AddLocalizedString("searchEnginesPageTitle",
+                                  IDS_SETTINGS_SEARCH_ENGINES_PAGE_TITLE);
+  html_source->AddLocalizedString(
+      "searchEnginesAddSearchEngineLabel",
+      IDS_SETTINGS_SEARCH_ENGINES_ADD_SEARCH_ENGINE_LABEL);
+  html_source->AddLocalizedString("searchEnginesLabel",
+                                  IDS_SETTINGS_SEARCH_ENGINES_LABEL);
+  html_source->AddLocalizedString(
+      "searchEnginesOtherLabel",
+      IDS_SETTINGS_SEARCH_ENGINES_OTHER_ENGINES_LABEL);
+  html_source->AddLocalizedString("searchEnginesDomainLabel",
+                                  IDS_SETTINGS_SEARCH_ENGINES_DOMAIN_LABEL);
+  html_source->AddLocalizedString("searchEnginesKeywordLabel",
+                                  IDS_SETTINGS_SEARCH_ENGINES_KEYWORD_LABEL);
+  html_source->AddLocalizedString("searchEnginesQueryURLLabel",
+                                  IDS_SETTINGS_SEARCH_ENGINES_QUERY_URL_LABEL);
+  html_source->AddLocalizedString("searchEnginesAddButtonLabel",
+                                  IDS_SETTINGS_SEARCH_ENGINES_ADD_BUTTON_LABEL);
+}
+
 }  // namespace
 
 namespace settings {
@@ -133,6 +154,7 @@ void AddLocalizedStrings(content::WebUIDataSource* html_source) {
   AddInternetStrings(html_source);
 #endif
   AddSearchStrings(html_source);
+  AddSearchEnginesStrings(html_source);
   html_source->SetJsonPath(kLocalizedStringsFile);
 }
 
diff --git a/ui/webui/resources/cr_elements/cr_input/cr_input.js b/ui/webui/resources/cr_elements/cr_input/cr_input.js
index ce37311..d705acbf 100644
--- a/ui/webui/resources/cr_elements/cr_input/cr_input.js
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input.js
@@ -108,7 +108,11 @@ Polymer('cr-input', {
      * @type string
      * @default ''
      */
-    committedValue: ''
+    committedValue: '',
+  },
+
+  computed: {
+    isInvalid: '$.decorator.isInvalid'
   },
 
   /**