[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.
 
 /**
  * @typedef {{querying: boolean,
  *            searchTerm: string,
  *            results: ?Array<!HistoryEntry>,
  *            info: ?HistoryQuery,
  *            range: HistoryRange,
@@ skipping 30 matching lines @@
           searchTerm: '',
           results: null,
           info: null,
           range: HistoryRange.ALL_TIME,
           // TODO(calamity): Make history toolbar buttons change the offset.
           groupedOffset: 0,
           sessionList: null,
         };
       }
     },
+
+    // The top level route.
+    route: {
+      type: Object
+    },
+
+    // Route data for the current page.
+    routeData: {
+      type: Object,
+      observer: 'routeChanged_'
+    }
   },
 
   observers: [
     'searchTermChanged_(queryState_.searchTerm)',
     'groupedRangeChanged_(queryState_.range)',
+    'routeChanged_(route)',
   ],
 
   // TODO(calamity): Replace these event listeners with data bound properties.
   listeners: {
     'history-checkbox-select': 'checkboxSelected',
     'unselect-all': 'unselectAll',
     'delete-selected': 'deleteSelected',
     'search-domain': 'searchDomain_',
     'load-more-history': 'loadMoreHistory_',
   },
 
   ready: function() {
     this.grouped_ = loadTimeData.getBoolean('groupByDomain');
   },
 
+  routeChanged_: function(route) {
+    var routeToElementId = {
+      'openTabs': 'history-synced-device-manager',
+    };

[tsergeant, 2016/06/08 03:42:17]

I'm not a big fan of this (as I think you predicted). What you're creating is a
1-1 mapping between two different types of strings, with a default:

openTabs <-> history-synced-device-manager
* --> history-list

Why not just use the string on the left (the user friendly page name)
everywhere, rather than using the string on the right in some places?

[calamity, 2016/06/14 05:05:50]

Ok, so we'll be going with /, /grouped/week, /grouped/month, /openTabs I guess?

+    var path = this.routeData.page;
+    var elementId = routeToElementId[path] || 'history-list';
+    this.selectedPage_ = elementId;
+  },
+
   /**
    * Listens for history-item being selected or deselected (through checkbox)
    * and changes the view of the top toolbar.
    * @param {{detail: {countAddition: number}}} e
    */
   checkboxSelected: function(e) {
     var toolbar = /** @type {HistoryToolbarElement} */(this.$.toolbar);
     toolbar.count += e.detail.countAddition;
   },
 
@@ skipping 127 matching lines @@
     if (selectedPage == 'history-list' && range != HistoryRange.ALL_TIME)
       return 'history-grouped-list';
 
     return selectedPage;
   },
 
   syncedTabsSelected_(selectedPage) {
     return selectedPage == 'history-synced-device-manager';
   }
 });