Convert cr-settings-main to Polymer 0.8

This hasn't been thoroughly tested yet. Once more pages are ready
and the rest of the structure is in place I will look more closely
at how pages are selected

BUG=485381

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

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

chrome/browser/resources/settings/settings_main/settings_main_style.html → chrome/browser/resources/settings/settings_main/settings_main.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="settingsMainStyle">
 :host {
   background-color: rgb(219, 222, 224);
   color: black;
@@ -22,4 +22,3 @@
 ::content core-icon-button {
   position: absolute;
 }
-</core-style>

chrome/browser/resources/settings/settings_main/settings_main.html

-<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
-<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html">
-<link rel="import" href="chrome://resources/polymer/core-transition/core-transition.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/iron-pages/iron-pages.html">
+<link rel="import" href="chrome://md-settings/routes.html">
+
+<!-- TODO: Uncomment pages as they are upgraded.
 <link rel="import" href="chrome://md-settings/a11y_page/a11y_page.html">
 <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">
@@ -9,41 +10,54 @@
 <link rel="import" href="chrome://md-settings/internet_page/internet_detail_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">
+-->
 
-<polymer-element name="cr-settings-main">
+<dom-module id="cr-settings-main">
+  <link rel="import" type="css" href="settings_main.css">
   <template>
-    <core-style ref="settingsMainStyle"></core-style>
     <div id="mainContainer">
-      <cr-settings-page-header selectedPage="{{$.pageContainer.selectedItem}}">
+      <cr-settings-page-header selected-page="[[selectedPage]]">
       </cr-settings-page-header>
-      <content select="core-icon-button"></content>
-      <more-route-selector selectedParams="{{params}}">
-        <core-animated-pages id="pageContainer"
-            on-core-select="{{onCoreSelect_}}" valueattr="PAGE_ID"
-            transitions="cross-fade">
+      <content select="paper-icon-button"></content>
+      <more-route-selector selected-params="{{params}}">
+        <iron-pages id="pageContainer" selected-item="{{selectedPage}}"
+            on-iron-select="onIronSelect_" attr-for-selected="PAGE_ID">
+          <!-- TODO: Uncomment pages as they are upgraded. -->
 <if expr="chromeos">
+          <!--
           <cr-settings-internet-page route="internet">
           </cr-settings-internet-page>
+          -->
+          <!--
           <cr-settings-internet-detail-page route="internet-detail"
               subpage="true" guid="{{params.guid}}">
           </cr-settings-internet-detail-page>
+          -->
 </if>
+          <!--
           <cr-settings-a11y-page prefs="{{prefs}}" route="a11y">
           </cr-settings-a11y-page>
+          -->
 <if expr="chromeos">
+          <!--
           <cr-settings-date-time-page prefs="{{prefs}}" route="dateTime">
           </cr-settings-date-time-page>
 </if>
+          -->
+          <!--
           <cr-settings-downloads-page prefs="{{prefs}}" route="downloads">
           </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>
+          -->
+        </iron-pages>
       </more-route-selector>
     </div>
   </template>

chrome/browser/resources/settings/settings_main/settings_main.js

@@ -8,47 +8,51 @@
  *
  * Example:
  *
- *     <cr-settings-main pages="{{pages}}" selectedPageId="{{selectedId}}">
+ *     <cr-settings-main pages="[[pages]]" selected-page-id="{{selectedId}}">
  *     </cr-settings-main>
  *
- * See cr-settings-drawer for example of use in 'core-drawer-panel'.
+ * See cr-settings-drawer for example of use in 'paper-drawer-panel'.
  *
  * @group Chrome Settings Elements
  * @element cr-settings-main
  */
-Polymer('cr-settings-main', {
-  publish: {
+Polymer({
+  is: 'cr-settings-main',
+
+  properties: {
     /**
      * Preferences state.
      *
-     * @attribute prefs
-     * @type CrSettingsPrefsElement
-     * @default null
+     * @type {?CrSettingsPrefsElement}
      */
-    prefs: null,
+    prefs: {
+      type: Object,
+      notify: true,
+    },
 
     /**
      * Pages that may be shown.
-     *
-     * @attribute pages
-     * @type Array<!Object>
-     * @default null
+     * @type {?Array<!HTMLElement>}
      */
-    pages: null,
+    pages: Array,
 
     /**
-     * ID of the currently selected page.
-     *
-     * @attribute selectedPageId
-     * @type string
-     * default ''
+     * Currently selected page.
+     * @type {?HTMLElement}
      */
-    selectedPageId: '',
-  },
+    selectedPage: {
+      type: Object,
+      notify: true,
+    },
 
-  /** @override */
-  created: function() {
-    this.pages = [];
+    /**
+     * ID of the currently selected page.
+     */
+    selectedPageId: {
+      type: String,
+      notify: true,
+      observe: 'selectedPageIdChanged_',
+    },
   },
 
   /** @override */
@@ -62,14 +66,15 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * Polymer changed event for selectedPageId. See note for onCoreSelect_ below.
+   * Polymer changed event for selectedPageId. See note for onIronSelect_ below.
+   * @private
    */
-  selectedPageIdChanged: function() {
+  selectedPageIdChanged_: function() {
     this.$.pageContainer.selected = this.selectedPageId;
   },
 
   /**
-   * We observe $.pageContainer.on-core-select instead of using data binding
+   * We observe $.pageContainer.on-iron-select instead of using data binding
    * for two reasons:
    * 1) We need to exclude subpages
    * 2) There is a bug with data binding or our useage of it here causing
@@ -78,7 +83,7 @@ Polymer('cr-settings-main', {
    *    fixing this and using filters once we switch to Polymer 0.8.
    * @private
    */
-  onCoreSelect_: function(event) {
+  onIronSelect_: function(event) {
     if (event.target != this.$.pageContainer || !event.detail.isSelected ||
         event.detail.item.subpage) {
       return;
@@ -89,7 +94,6 @@ Polymer('cr-settings-main', {
   /**
    * If no page is selected, selects the first page. This happens on load and
    * when a selected page is removed.
-   *
    * @private
    */
   ensureSelection_: function() {
@@ -100,8 +104,7 @@ Polymer('cr-settings-main', {
   },
 
   /**
-   * Updates the list of pages using the pages in core-animated-pages.
-   *
+   * Updates the list of pages using the pages in iron-pages.
    * @private
    */
   pageContainerUpdated_: function() {

chrome/browser/resources/settings/settings_resources.grd

@@ -41,8 +41,8 @@
       <structure name="IDR_SETTINGS_CR_SETTINGS_DRAWER_JS"
                  file="settings_drawer/settings_drawer.js"
                  type="chrome_html" />
-      <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_STYLE_HTML"
-                 file="settings_main/settings_main_style.html"
+      <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_CSS"
+                 file="settings_main/settings_main.css"
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_CR_SETTINGS_MAIN_HTML"
                  file="settings_main/settings_main.html"

ui/webui/resources/polymer_resources.grdp

@@ -532,6 +532,42 @@
     <structure name="IDR_POLYMER_08_IRON_META_IRON_META_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/iron-meta/iron-meta-extracted.js"
                type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_PAGES_IRON_PAGES_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-pages/iron-pages.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_PAGES_IRON_PAGES_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-pages/iron-pages-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_RESIZABLE_BEHAVIOR_IRON_RESIZABLE_BEHAVIOR_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-resizable-behavior/iron-resizable-behavior.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_RESIZABLE_BEHAVIOR_IRON_RESIZABLE_BEHAVIOR_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-resizable-behavior/iron-resizable-behavior-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_MULTI_SELECTABLE_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-multi-selectable.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_MULTI_SELECTABLE_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-multi-selectable-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTABLE_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selectable.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTABLE_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selectable-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTION_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selection.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTION_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selection-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTOR_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selector.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_IRON_SELECTOR_IRON_SELECTOR_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/iron-selector/iron-selector-extracted.js"
+               type="chrome_html" />
 
     <structure name="IDR_POLYMER_08_PAPER_BEHAVIORS_PAPER_BUTTON_BEHAVIOR_HTML"
                file="../../../third_party/polymer/v0_8/components-chromium/paper-behaviors/paper-button-behavior.html"
@@ -637,44 +673,59 @@
     <structure name="IDR_POLYMER_08_MORE_ROUTING_DRIVER_HASH_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/driver/hash-extracted.js"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_HTML"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route.html"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_DRIVER_MOCK_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/driver/mock-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_DRIVER_MOCK_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/driver/mock.html"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_DRIVER_PATH_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/driver/path-extracted.js"
+               type="chrome_html" />
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_DRIVER_PATH_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/driver/path.html"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-extracted.js"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_CONTEXT_AWARE_HTML"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-context-aware.html"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route.html"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_CONTEXT_AWARE_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-context-aware-extracted.js"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTION_HTML"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selection.html"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_CONTEXT_AWARE_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-context-aware.html"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTION_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selection-extracted.js"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTOR_HTML"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selector.html"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTION_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selection.html"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTOR_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selector-extracted.js"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTING_CONFIG_HTML"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-routing-config.html"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTE_SELECTOR_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-route-selector.html"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTING_CONFIG_EXTRACTED_JS"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-routing-config-extracted.js"
                type="chrome_html" />
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTING_CONFIG_HTML"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-routing-config.html"
+               type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_MORE_ROUTING_HTML"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/more-routing.html"
                type="chrome_html" />
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_ROUTE_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/route-extracted.js"
+               type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_ROUTE_HTML"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/route.html"
                type="chrome_html" />
-    <structure name="IDR_POLYMER_08_MORE_ROUTING_ROUTE_EXTRACTED_JS"
-               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/route-extracted.js"
+    <structure name="IDR_POLYMER_08_MORE_ROUTING_ROUTING_EXTRACTED_JS"
+               file="../../../third_party/polymer/v0_8/components-chromium/more-routing/routing-extracted.js"
                type="chrome_html" />
     <structure name="IDR_POLYMER_08_MORE_ROUTING_ROUTING_HTML"
                file="../../../third_party/polymer/v0_8/components-chromium/more-routing/routing.html"