Convert search page to Polymer 0.8.

BUG=485381

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

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

chrome/browser/resources/settings/search_page/search_page_style.html → chrome/browser/resources/settings/search_page/search_page.css

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+/* 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. */
 
-<core-style id="searchPageStyle">
 .manage-search-engines {
   -webkit-margin-start: 10px;
 }
 
 .search-engines {
+  align-items: center;
+  display: flex;
   margin-top: 20px;
 }
 
-.search-engines-dropdown {
+#searchEnginesMenu {
   min-width: 150px;
-}
-</core-style>
+}
\ No newline at end of file

chrome/browser/resources/settings/search_page/search_page.html

-<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">
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/paper-material/paper-material.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/more-routing/more-routing.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
 <link rel="import" href="chrome://md-settings/checkbox/checkbox.html">
-<link rel="import" href="search_page_style.html">
 
-<polymer-element name="cr-settings-search-page">
+<dom-module id="cr-settings-search-page">
+  <link rel="import" type="css" href="chrome://md-settings/settings_page/settings_page.css">
+  <link rel="import" type="css" href="search_page.css">
   <template>
-    <link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
-    <core-style ref="searchPageStyle"></core-style>
-    <paper-shadow layout vertical cross-fade>
+    <paper-material>
       <p i18n-content="searchExplanation"></p>
 
-      <div class="search-engines" layout horizontal center>
-        <cr-dropdown-menu class="search-engines-dropdown">
-          <core-menu id="searchEnginesMenu" class="menu" valueAttr="guid"
-              selected="{{defaultEngineGuid}}">
-            <template repeat="{{engine in searchEngines}}">
-              <paper-item guid="{{engine.guid}}">{{engine.name}}</paper-item>
-            </template>
-          </core-menu>
-        </cr-dropdown-menu>
+      <div class="search-engines">
+        <select id="searchEnginesMenu" on-change="defaultEngineGuidChanged_">
+          <template is="x-repeat" items="[[searchEngines]]">
+            <option value="[[item.guid]]">{{item.name}}</option>
+          </template>
+        </select>
 
         <cr-button class="manage-search-engines"
             i18n-content="searchManageButtonLabel"
-            on-click="{{manageSearchEngines_}}" raised>
+            on-click="manageSearchEngines_" raised>
         </cr-button>
       </div>
-    </paper-shadow>
+    </paper-material>
   </template>
   <script src="search_page.js"></script>
-</polymer-element>
+</dom-module>

chrome/browser/resources/settings/search_page/search_page.js

@@ -8,95 +8,76 @@
  *
  * Example:
  *
- *    <core-animated-pages>
+ *    <iron-animated-pages>
  *      <cr-settings-search-page prefs="{{prefs}}"></cr-settings-search-page>
  *      ... other pages ...
- *    </core-animated-pages>
+ *    </iron-animated-pages>
  *
  * @group Chrome Settings Elements
  * @element cr-settings-search-page
  */
-Polymer('cr-settings-search-page', {
-  publish: {
+Polymer({
+  is: 'cr-settings-search-page',
+
+  properties: {
     /**
      * Preferences state.
-     *
-     * @attribute prefs
-     * @type {CrSettingsPrefsElement}
-     * @default null
+     * @type {?CrSettingsPrefsElement}
      */
-    prefs: null,
+    prefs: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * Route for the page.
-     *
-     * @attribute route
-     * @type {string}
-     * @default ''
      */
-    route: '',
+    route: String,
 
     /**
      * Whether the page is a subpage.
-     *
-     * @attribute subpage
-     * @type {boolean}
-     * @default false
      */
-    subpage: false,
+    subpage: {
+      type: Boolean,
+      value: false,
+    },
 
     /**
      * ID of the page.
-     *
-     * @attribute PAGE_ID
-     * @const {string}
-     * @default 'search'
      */
-    PAGE_ID: 'search',
+    PAGE_ID: {
+      type: String,
+      value: 'search',
+    },
 
     /**
      * Title for the page header and navigation menu.
-     *
-     * @attribute pageTitle
-     * @type {string}
      */
-    pageTitle: loadTimeData.getString('searchPageTitle'),
+    pageTitle: {
+      type: String,
+      value: function() { return loadTimeData.getString('searchPageTitle'); },
+    },
 
     /**
-     * Name of the 'core-icon' to be shown in the settings-page-header.
-     *
-     * @attribute icon
-     * @type {string}
-     * @default 'search'
+     * Name of the 'iron-icon' to be shown in the settings-page-header.
      */
-    icon: 'search',
+    icon: {
+      type: Boolean,
+      value: 'search',
+    },
 
     /**
      * List of default search engines available.
-     *
-     * @attribute searchEngines
-     * @type {Array<!SearchEngine>}
-     * @default null
-     */
-    searchEngines: null,
-
-    /**
-     * GUID of the currently selected default search engine.
-     *
-     * @attribute defaultEngineGuid
-     * @type {string}
-     * @default ''
+     * @type {?Array<!SearchEngine>}
      */
-    defaultEngineGuid: '',
+    searchEngines: {
+      type: Array,
+      value: function() { return []; },
+    },
   },
 
   /** @override */
   created: function() {
-    this.searchEngines = [];
-  },
-
-  /** @override */
-  domReady: function() {
     chrome.searchEnginesPrivate.onSearchEnginesChanged.addListener(
         this.updateSearchEngines_.bind(this));
     chrome.searchEnginesPrivate.getSearchEngines(
@@ -106,9 +87,11 @@ Polymer('cr-settings-search-page', {
   /**
    * Persists the new default search engine back to Chrome. Called when the
    * user selects a new default in the search engines dropdown.
+   * @private
    */
-  defaultEngineGuidChanged: function() {
-    chrome.searchEnginesPrivate.setSelectedSearchEngine(this.defaultEngineGuid);
+  defaultEngineGuidChanged_: function() {
+    chrome.searchEnginesPrivate.setSelectedSearchEngine(
+        this.$.searchEnginesMenu.value);
   },
 
 
@@ -125,7 +108,7 @@ Polymer('cr-settings-search-page', {
           chrome.searchEnginesPrivate.SearchEngineType.DEFAULT) {
         defaultEngines.push(engine);
         if (engine.isSelected) {
-          this.defaultEngineGuid = engine.guid;
+          this.$.searchEnginesMenu.value = engine.guid;
         }
       }
     }, this);

chrome/browser/resources/settings/settings_resources.grd

@@ -151,8 +151,8 @@
                  type="chrome_html"
                  flattenhtml="true"
                  allowexternalscript="true" />
-      <structure name="IDR_SETTINGS_SEARCH_PAGE_STYLE_HTML"
-                 file="search_page/search_page_style.html"
+      <structure name="IDR_SETTINGS_SEARCH_PAGE_CSS"
+                 file="search_page/search_page.css"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_SETTINGS_HTML"
                  file="settings.html"