[MD History] Add routing to the synced devices page.

chrome/browser/resources/md_history/app.js

 // Copyright 2016 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.
 
 Polymer({
   is: 'history-app',
 
   properties: {
     // The id of the currently selected page.
     selectedPage_: {type: String, value: 'history', observer: 'unselectAll'},
@@ skipping 26 matching lines @@
     queryResult_: {
       type: Object,
       value: function() {
         return {
           info: null,
           results: null,
           sessionList: null,
         };
       }
     },
+
+    // Route data for the current page.
+    routeData_: Object,
   },
 
+  observers: [
+    // routeData_.page <=> selectedPage
+    'routeDataChanged_(routeData_.page)',
+    'selectedPageChanged_(selectedPage_)',
+  ],
+
+  // TODO(calamity): Replace these event listeners with data bound properties.
   listeners: {
     'cr-menu-tap': 'onMenuTap_',
     'history-checkbox-select': 'checkboxSelected',
     'unselect-all': 'unselectAll',
     'delete-selected': 'deleteSelected',
     'search-domain': 'searchDomain_',
   },
 
   /** @override */
   ready: function() {
@@ skipping 100 matching lines @@
           .$$('history-synced-device-manager');
     syncedDeviceManagerElem.updateSignInState(isUserSignedIn);
   },
 
   /**
    * @param {string} selectedPage
    * @return {boolean}
    * @private
    */
   syncedTabsSelected_: function(selectedPage) {
-    return selectedPage == 'synced-devices';
+    return selectedPage == 'syncedTabs';
   },
 
   /**
    * @param {boolean} querying
    * @param {boolean} incremental
    * @param {string} searchTerm
    * @return {boolean} Whether a loading spinner should be shown (implies the
    *     backend is querying a new search term).
    * @private
    */
   shouldShowSpinner_: function(querying, incremental, searchTerm) {
     return querying && !incremental && searchTerm != '';
   },
+
+  /**
+   * @param {string} page
+   * @private
+   */
+  routeDataChanged_: function(page) {
+    this.selectedPage_ = page;
+  },
+
+  /**
+   * @param {string} selectedPage
+   * @private
+   */
+  selectedPageChanged_: function(selectedPage) {
+    this.set('routeData_.page', selectedPage);
+  },
+
+  /**
+   * This computed binding is needed to make the iron-pages selector update when
+   * the synced-device-manager is instantiated for the first time. Otherwise the
+   * fallback selection will continue to be used after the corresponding item is
+   * added as a child of iron-pages.
+   * @param {string} selectedPage
+   * @param {Array} items
+   * @return {string}
+   * @private
+   */
+  getSelectedPage_(selectedPage, items) {
+    return selectedPage;
+  },
 });