Convert search_engines_page (and search_engine-adder) to be compatible with Polymer 0.8.

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

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

chrome/browser/resources/settings/search_engines_page/search_engine_adder_style.html → chrome/browser/resources/settings/search_engines_page/search_engine_adder.css

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/core-style/core-style.html">
+/* Copyright (c) 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="searchEngineAdderStyle">
 .input-label {
   font-size: 0.75em;
 }
@@ -18,4 +18,3 @@
 .input-field {
   -webkit-margin-end: 20px;
 }
-</core-style>

chrome/browser/resources/settings/search_engines_page/search_engine_adder.html

-<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">
+<link rel="import" href="chrome://resources/polymer/v0_8/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v0_8/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_collapse/cr_collapse.html">
+<link rel="import" href="chrome://resources/cr_elements/v0_8/cr_input/cr_input.html">
 
-<polymer-element name="cr-search-engine-adder">
+<dom-module id="cr-search-engine-adder">
+  <link rel="import" type="css" href="search_engine_adder.css">
   <template>
-    <core-style ref="searchEngineAdderStyle"></core-style>
-
-    <div class="add-label" layout horizontal center justified>
+    <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="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 id="domainField" auto-validate="false" required>
           </cr-input>
         </div>
-        <div class="input-field" flex two>
+        <div class="input-field flex two">
           <div class="input-label" i18n-content="searchEnginesKeywordLabel">
           </div>
-          <cr-input id="keywordField" autoValidate="false" required>
+          <cr-input id="keywordField" auto-validate="false" required>
           </cr-input>
         </div>
-        <div class="input-field" flex four>
+        <div class="input-field flex four">
           <div class="input-label" i18n-content="searchEnginesQueryURLLabel">
           </div>
-          <cr-input id="queryURLField" autoValidate="false" required>
+          <cr-input id="queryURLField" auto-validate="false" required>
           </cr-input>
         </div>
-        <div layout horizontal center>
+        <div class="layout horizontal center">
           <cr-button i18n-content="searchEnginesAddButtonLabel"
-              on-click="{{add_}}"raised>
+              on-click="{{add_}}" raised>
           </cr-button>
         </div>
       </div>
     </cr-collapse>
   </template>
   <script src="search_engine_adder.js"></script>
-</polymer-element>
+</dom-module>

chrome/browser/resources/settings/search_engines_page/search_engine_adder.js

@@ -9,7 +9,9 @@
  * @group Chrome Settings Elements
  * @element cr-settings-search-engine-adder
  */
-Polymer('cr-search-engine-adder', {
+Polymer({
+  is: 'cr-search-engine-adder',
+
   /** @private */
   add_: function() {
     if (!this.$.domainField.isInvalid &&

chrome/browser/resources/settings/search_engines_page/search_engines_page.html

-<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="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="search_engine_adder.html">
-<link rel="import" href="search_engines_page_style.html">
 
-<polymer-element name="cr-settings-search-engines-page">
+<dom-module id="cr-settings-search-engines-page">
+  <link rel="import" type="css" href="chrome://md-settings/settings_page/settings_page.css">
   <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>
+    <paper-material>
       <div class="content">
         <cr-search-engine-adder></cr-search-engine-adder>
+        <!-- TODO(orenb): Add search engine lists with defaultSearchEngines and
+             otherSearchEngines. -->
       </div>
-    </paper-shadow>
+    </paper-material>
   </template>
   <script src="search_engines_page.js"></script>
-</polymer-element>
+</dom-module>

chrome/browser/resources/settings/search_engines_page/search_engines_page.js

@@ -17,134 +17,60 @@
  * @group Chrome Settings Elements
  * @element cr-settings-search-engines-page
  */
-Polymer('cr-settings-search-engines-page', {
-  publish: {
+Polymer({
+  is: 'cr-settings-search-engines-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: {
+      type: String,
+      value: ''
+    },
 
     /**
      * Whether the page is a subpage.
-     *
-     * @attribute subpage
-     * @type {boolean}
-     * @default true
      */
-    subpage: true,
+    subpage: {
+      type: Boolean,
+      value: true,
+      readOnly: true
+    },
 
     /**
      * ID of the page.
-     *
-     * @attribute PAGE_ID
-     * @const {string}
-     * @default 'search'
      */
-    PAGE_ID: 'search_engines',
+    PAGE_ID: {
+      type: String,
+      value: 'search_engines',
+      readOnly: true
+    },
 
     /**
      * Title for the page header and navigation menu.
-     *
-     * @attribute pageTitle
-     * @type {string}
      */
-    pageTitle: loadTimeData.getString('searchEnginesPageTitle'),
+    pageTitle: {
+      type: String,
+      value: loadTimeData.getString('searchEnginesPageTitle'),
+      readOnly: true
+    },
 
     /**
      * 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;
-  }
+    icon: {
+      type: String,
+      value: 'search',
+      readOnly: true
+    },
 });

chrome/browser/resources/settings/search_engines_page/search_engines_page_style.html

-<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>

chrome/browser/resources/settings/settings_resources.grd

@@ -129,8 +129,8 @@
                  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"
+      <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINE_ADDER_CSS"
+                 file="search_engines_page/search_engine_adder.css"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_SEARCH_ENGINES_PAGE_SEARCH_ENGINES_PAGE_JS"
                  file="search_engines_page/search_engines_page.js"
@@ -140,9 +140,6 @@
                  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" />