MD History: Replace app-route with a custom router

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',
 
   behaviors: [Polymer.IronScrollTargetBehavior],
 
   properties: {
     // Used to display notices for profile sign-in status.
     showSidebarFooter: Boolean,
 
     hasSyncedResults: Boolean,
 
     // The id of the currently selected page.
-    selectedPage_: {type: String, observer: 'unselectAll'},
+    selectedPage_: {type: String, observer: 'selectedPageChanged_'},
 
     // Whether domain-grouped history is enabled.
     grouped_: {type: Boolean, reflectToAttribute: true},
 
     /** @type {!QueryState} */
     queryState_: {
       type: Object,
       value: function() {
         return {
           // Whether the most recent query was incremental.
@@ skipping 17 matching lines @@
       type: Object,
       value: function() {
         return {
           info: null,
           results: null,
           sessionList: null,
         };
       }
     },
 
-    // Route data for the current page.
-    routeData_: Object,
-
-    // The query params for the page.
-    queryParams_: Object,
-
     // True if the window is narrow enough for the page to have a drawer.
     hasDrawer_: Boolean,
 
     isUserSignedIn_: {
       type: Boolean,
       // Updated on synced-device-manager attach by chrome.sending
       // 'otherDevicesInitialized'.
       value: loadTimeData.getBoolean('isUserSignedIn'),
     },
 
     toolbarShadow_: {
       type: Boolean,
       reflectToAttribute: true,
       notify: true,
     }
   },
 
-  observers: [
-    // routeData_.page <=> selectedPage
-    'routeDataChanged_(routeData_.page)',
-    'selectedPageChanged_(selectedPage_)',
-
-    // queryParams_.q <=> queryState.searchTerm
-    'searchTermChanged_(queryState_.searchTerm)',
-    'searchQueryParamChanged_(queryParams_.q)',
-
-  ],
-
   // 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_',

[calamity, 2016/09/22 05:12:26]

Remove.

[tsergeant, 2016/09/22 23:57:42]

Good pickup, done.

     'history-close-drawer': 'closeDrawer_',
     'history-view-changed': 'historyViewChanged_',
   },
 
   /** @override */
   ready: function() {
     this.grouped_ = loadTimeData.getBoolean('groupByDomain');
 
     cr.ui.decorate('command', cr.ui.Command);
     document.addEventListener('canExecute', this.onCanExecute_.bind(this));
     document.addEventListener('command', this.onCommand_.bind(this));
-
-    // Redirect legacy search URLs to URLs compatible with material history.
-    if (window.location.hash) {
-      window.location.href = window.location.href.split('#')[0] + '?' +
-          window.location.hash.substr(1);
-    }
   },
 
   onFirstRender: function() {
     // requestAnimationFrame allows measurement immediately before the next
     // repaint, but after the first page of <iron-list> items has stamped.
     requestAnimationFrame(function() {
       chrome.send(
           'metricsHandler:recordTime',
           ['History.ResultsRenderedTime', window.performance.now()]);
     });
 
     // Focus the search field on load. Done here to ensure the history page
     // is rendered before we try to take focus.
     if (!this.hasDrawer_) {
       this.focusToolbarSearchField();
     }
   },
 
   /** Overridden from IronScrollTargetBehavior */
   _scrollHandler: function() {
-    this.toolbarShadow_ = this.scrollTarget.scrollTop != 0;
+    if (this.scrollTarget)
+      this.toolbarShadow_ = this.scrollTarget.scrollTop != 0;
   },
 
   /** @private */
   onMenuTap_: function() {
     var drawer = this.$$('#drawer');
     if (drawer)
       drawer.toggle();
   },
 
   /**
@@ skipping 35 matching lines @@
         /** @type {HistoryListContainerElement} */ (this.$['history']);
     listContainer.historyResult(info, results);
   },
 
   /**
    * Focuses the search bar in the toolbar.
    */
   focusToolbarSearchField: function() { this.$.toolbar.showSearchField(); },
 
   /**
-   * Fired when the user presses 'More from this site'.
-   * @param {{detail: {domain: string}}} e
-   */
-  searchDomain_: function(e) { this.$.toolbar.setSearchTerm(e.detail.domain); },
-
-  /**
    * @param {Event} e
    * @private
    */
   onCanExecute_: function(e) {
     e = /** @type {cr.ui.CanExecuteEvent} */(e);
     switch (e.command.id) {
       case 'find-command':
         e.canExecute = true;
         break;
       case 'slash-command':
         e.canExecute = !this.$.toolbar.searchBar.isSearchFocused();
         break;
       case 'delete-command':
         e.canExecute = this.$.toolbar.count > 0;
         break;
     }
   },
 
   /**
-   * @param {string} searchTerm
-   * @private
-   */
-  searchTermChanged_: function(searchTerm) {
-    this.set('queryParams_.q', searchTerm || null);
-    this.$['history'].queryHistory(false);
-    // TODO(tsergeant): Ignore incremental searches in this metric.
-    if (this.queryState_.searchTerm)
-      md_history.BrowserService.getInstance().recordAction('Search');
-  },
-
-  /**
-   * @param {string} searchQuery
-   * @private
-   */
-  searchQueryParamChanged_: function(searchQuery) {
-    this.$.toolbar.setSearchTerm(searchQuery || '');
-  },
-
-  /**
    * @param {Event} e
    * @private
    */
   onCommand_: function(e) {
     if (e.command.id == 'find-command' || e.command.id == 'slash-command')
       this.focusToolbarSearchField();
     if (e.command.id == 'delete-command')
       this.deleteSelected();
   },
 
@@ skipping 55 matching lines @@
    * @param {boolean} hasSyncedResults
    * @param {string} selectedPage
    * @return {boolean} Whether the (i) synced results notice should be shown.
    * @private
    */
   showSyncNotice_: function(hasSyncedResults, selectedPage) {
     return hasSyncedResults && selectedPage != 'syncedTabs';
   },
 
   /**
-   * @param {string} page
    * @private
    */
-  routeDataChanged_: function(page) { this.selectedPage_ = page; },
-
-  /**
-   * @param {string} selectedPage
-   * @private
-   */
-  selectedPageChanged_: function(selectedPage) {
-    this.set('routeData_.page', selectedPage);
+  selectedPageChanged_: function() {
+    this.unselectAll();
     this.historyViewChanged_();
   },
 
   /** @private */
   historyViewChanged_: function() {
     // This allows the synced-device-manager to render so that it can be set as
     // the scroll target.
     requestAnimationFrame(function() {
-      this.scrollTarget = this.$.content.selectedItem.getContentScrollTarget();
-      this._scrollHandler();
+      if (this.$.content.selectedItem) {

[tsergeant, 2016/09/21 07:57:47]

These guards are necessary because of tests.

I don't understand why, but I was getting a sequence of 4 calls to
historyViewChanged_ with `selectedItem` as `undefined` once and "history" every
other time. It was unclear why historyViewChanged_ was even being called -- I
couldn't reproduce anything like it in a regular browser.

I can try going back and debugging why this happened if you're concerned, but
I'm fairly certain that it wasn't anything which will affect the page outside of
tests.

[calamity, 2016/09/22 05:12:26]

Looks fine. Invert and early return with comment.

[tsergeant, 2016/09/22 23:57:42]

Done.

+        this.scrollTarget =
+            this.$.content.selectedItem.getContentScrollTarget();
+        this._scrollHandler();
+      }
     }.bind(this));
     this.recordHistoryPageView_();
   },
 
   /**
    * 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
@@ skipping 32 matching lines @@
             break;
         }
         break;
     }
 
     md_history.BrowserService.getInstance().recordHistogram(
       'History.HistoryPageView', histogramValue, HistoryPageViewHistogram.END
     );
   },
 });